4.4.6 组件之间的数据共享

组件之间的关系：父子关系、兄弟关系

父子组件之间的数据共享：1、父->子（自定义属性） 2、子->父（自定义事件）

自定义属性的使用：1、子组件使用props自定义属性 以及在template模板结构中使用该数据 2、父组件在 子组件的标签 中 动态绑定 对应的 props自定义属性，属性值为data数据里面的属性

子组件 <p>{{A}} {{B}}</p>        props:['A','B'];        渲染：123 456

父组件 <Son :A="a" :B="b.c"></Son> data(){return{a:'123', b:{c:'456',d:789}}}

自定义事件的使用：1、子组件的模板结构有对应的触发事件如click，data()中的想要传递给父组件的数据，methods有对应的触发事件，事件里面 this.$emit('自定义事件',this.传递的数据)

父组件的子组件标签<Son @自定义事件="事件处理函数"></Son> data中有用于接收数据的数据 methods中 事件处理函数(形参val){ this.接收数据的数据 }

兄弟组件之间的数据共享：EventBus

1、单独创建一个eventBus.js文件(模板)，向外共享一个Vue实例对象

// 引入

import Vue from 'vue' 

// 创建实例

vueconst EventBus = new Vue() 

// 导出

export default EventBus

2、要接收和发送双方都需要导入eventBus.js（bus）

数据发送方，bus.$emit('事件名称',要发送的对象)

数据接收方，bus.$on('事件名称',事件处理函数)