vue2的三种组件通信方式

（1）父组件向子组件传递数据

一个组件里面引入另外一个组件，此时就构成了一种“父子关系”，当前组件为“父”，引入的组件为“子”；

实现步骤：

👉父组件中在渲染的子组件标签上定义属性名，这个自定义属性可以绑定固定值，也可以通过v-bind给这个自定义属性绑定动态数据传递给子组件。

👉子组件中通过props接收。

props可以是数组的方式 props: [ 'username', 'age', 'user' ]
    也可以书写成对象的方式
props: {
    子组件标签自定义的属性名: {
        type: String, ///类型判断 数据类型 Number String Boolean Object Array
        default:'' //默认值 0 '' false
    }
}

注意点：

→props里面接收的对象名称必须与父组件中在子组件绑定的属性名称一致

→在子组件里template模板中可以直接通过mastache表达式使用props里的值；

→组件return中需要通过this.方式使用props里面的值

（2）子组件向父组件传递数据

第1步：在子组件里通过this.$emit方法通知父组件

$emit的第一个参数是字符串类型的自定义事件名,第二个参数是需要传递的数据

this.$emit('自定义事件名', '要传递的参数')

第2步：在父组件里给子组件标签绑定事件，事件名就是$emit的第一个参数自定义事件名

父组件可以通过事件函数获得子组件传递过来的数据

fn(data) {
    console.log(data) // data就是子组件传递过来的数据
}

（3）任意两个组件之间进行通讯 也就是eventBus中央事件总线（或者叫中间组件）

前提条件：两个组件需要同时存在，同时渲染的状态

第1步：在main.js中 给vue原型对象上挂载一个$bus，作为中央处理组件

Vue.prototype.$bus = new Vue();

第2步：a组件通过this.$bus.$emit向b组件发出通知，

第一个参数是自定义事件名称
第二个参数就是要传递的数据
this.$bus.$emit('send', '我是子组件里的数据')

第3步：b组件通过this.$bus.$on来接受数据

第一个参数是和a组件相同的自定义事件名称
第二个参数是一个函数，函数的函参就是其他组件传递过来的值