vue的组件通信

1.父组件向子组件传值

//App.vue父组件
<template>
  <div id="app">
    <child :users="users"></child>//前者自定义名称用于子组件调用，后者要传递数据的名称
  </div>
</template>

<script>
import child from "./components/child"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    child
  }
}

//child.vue子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //父组件中自定义名称
      type:Array,
      required:true
    }
  }
}
</script>

父传子的实现方式：在子组件上使用自定义属性绑定数据，用props声明自定义属性（父组件通过props向下传值）

2.子组件向父组件传值

//App.vue父组件
<template>
  <div id="app">
    <child :users=“users" @change=“change"></child>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>

<script>
import child from "./components/child"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    child
  },
  methods: {
    change (data) {
      console.log(data) //data是子组件传过来的数据，只要子组件传过来值有变化，change这个函数就会被触发
    }
  }
}

//child.vue子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users” @click=“sendMsg">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  },
  data(){
    msg:’123’ //要发送给父组件的值
  },
  methods: {
    sendMsg () {
      this.$emit(‘change', this.msg) //msg传给父组件的值
    }
  }
}
</script>

子传父的实现方式：需要用到自定义事件，父组件用$on监听自定义事件，$emit触发父组件所绑定的自定义事件（子组件通过事件给父组件发送信息）