Vue如何实现组件间通信

父组件传给子组件：子组件通过props方法接受数据；
子组件传给父组件： $emit 方法传递参数

讨论1：子组件向父组件传值
方法一：子组件绑定一个事件，通过 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.emit(‘handleChange’, ‘Jack’) // 触发父组件中handleChange事件并传参Jack
// 注：此处事件名称与父组件中绑定的事件名称要一致
}
}
}
b,在父组件中定义并绑定 handleChange 事件
// 父组件
<child @handleChange=“changeName”>
methods: {
changeName(name) { // name形参是子组件中传入的值Jack
this.name = name
}
}
方法二：通过 callback 函数
a,先在父组件中定义一个callback函数，并把 callback 函数传过去
// 父组件

methods: {
callback: function(name) {
this.name = name
}
}
b,在子组件中接收，并执行 callback 函数
// 子组件
<button @click=“callback(‘Jack’)”>改变父组件的name
props: {
callback: Function,
}
方法三：通过 $parent / $children 或 $refs 访问组件实例
这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。
a,// 子组件
export default {
data () {
return {
title: ‘子组件’
}
},
methods: {
sayHello () {
console.log(‘Hello’);
}
}
}
b,// 父组件

注：这种方式的组件通信不能跨级。

讨论二：父组件向子组件传值
即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。
在父组件的子组件标签中绑定自定义属性
// 父组件

export default {
components: {
UserDetail
}
…
}
在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。
// 子组件
export default {
props: [‘myName’]
}

注：基于 vue 的单向数据流，即组件之间的数据是单向流通的，子组件是不允许直接对父组件传来的值进行修改的，所以应该避免这种直接修改父组件传过来的值的操作，否则控制台会报错。
具体操作是可以先把传过来的值重新赋值给data中的一个变量，然后再更改那个变量。

讨论三：兄弟组件之间传值
方法一：通过 $emit 和 props 结合的方式
a,在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件
// 父组件

<child-b :myName=“name” @changeName=“editName” />
export default {
data() {
return {
name: ‘John’
}
},
components: {
‘child-a’: ChildA,
‘child-b’: ChildB,
},
methods: {
editName(name) {
this.name = name
},
}
}
b,在子组件B中接收变量和绑定触发事件
// child-b 组件

<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 触发事件并传值
        }
    }
}
</script>

c,在子组件A接收改变后父组件的值

// child-a 组件
<p>姓名：{{ newName }}</p>
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return 'John' //没有传值的默认值
        }
    }
}
</script>

即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。
方法二： 通过一个空 vue 实例
a,创建一个 EventBus.js 文件，并暴露一个 vue 实例

import Vue from 'Vue'
export default new Vue()

b,在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数
(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)

<template>
    <div>
        <p>姓名: {{ name }}</p>
        <button @click="changeName">修改姓名</button>
    </div>
</template>
<script>
import { EventBus } from "../EventBus.js"
export default {
 data() {
     return {
         name: 'John',
     }
  },
  methods: {
      changeName() {
          this.name = 'Lily'
          EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
      }
    }
}
</script>

c,在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数

import { EventBus } from "../EventBus.js"
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
         EventBus.$on('editName', (name) => {
             this.name = name
         })
    }
}

注：这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理
方法三：使用 vuex

大总结：
父子通信： 父向子传递数据是通过 props，子向父是通过 $emit；通过 $parent / $children通信；$ref 也可以访问组件实例；provide / inject ；$attrs / $listeners；

兄弟通信： EventBus；Vuex；
跨级通信： EventBus；Vuex；provide / inject ；$attrs / $listeners；