Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间

props: ['msg', 'colored'],
methods: {
handleClick (e) {
this.$emit('handle-change-color') // 使用 $emit 方法触发父组件 handle-change-color 事件
// this.$emit('handler', 'param') // 还可以给事件传递参数
}
}
}

子组件接收 colored 父组件传递来的 prop，返回一个计算后的属性 color，根据 colored 返回不同样式。handleClick 处理当子组件元素被点击时 $emit 派发父组件的 handle-change-color 事件

效果如下：

父组件 $children 操作子组件

使用 $children 操作子组件。如上述例子中，colored 被定义在父组件中，可以将其移动到子组件中，并在父组件通过 $children 访问到子组件：

<template>
 <div @click="handleClick" class="home">
 <my-comp v-for="msg in msgs" :key="msg.id" :msg="msg"></my-comp>
 </div>
</template>

handleClick 事件被放置在 div 中

import MyComp from '@/components/MyComp.vue'
export default {
 // ...
 data () {
 return {
 msgs: [{
  // ...
 }] }
 },
 methods: {
 handleClick () {
 this.$children.forEach(child => {
 child.$data.colored = !child.$data.colored // 逐一控制子组件的 $data
 })
 }
 }
}

在子组件中不需要 $emit 事件，只需维护一个 data：

export default {
 name: 'MyComp',
 data () {
 return {
 colored: false // colored 状态
 }
 },
 computed: {
 color () {
 return this.colored ? 'red' : 'black'
 }
 },
 props: ['msg']}

子组件 $parent 访问父组件

子组件可通过 $parent 来修改父组件的 $data，因此 colored 定义在父组件中。

<template>
 <div class="home">
 <my-comp v-for="msg in msgs" :key="msg.id" :msg="msg" :colored="colored"></my-comp>
 </div>
</template>

通过 prop 传递 colored 参数给子组件

import MyComp from '@/components/MyComp.vue'
export default {
 name: 'home',
 components: {
 MyComp
 },
 data () {
 return {
 colored: false, // 父组件维护一个 colored 状态
 msgs: [{
  // ...
 }] }								 
 2/4   首页 上一页 1 2 3 4 下一页 尾页