组件之间的数据共享

---

父组件向子组件共享数据--------------自定义属性

子组件

在export default 中定义自定义属性props节点，设置自定义属性的required，default和type

父组件

用v-bind（冒号）给子组件标签绑定一个属性值（子组件中props节点中的自定义属性）
将要共享的数据赋值给这个属性

---

子组件向父组件共享数据-----------------自定义事件

子组件

在methods中定义一个事件处理函数func

在函数体中通过this.$emit('自定义事件名称'，要共享的数据)向父组件共享数据 (自定义事件sonFn)

func(){ this.$emit('sonFn',data) }

在要需要触发事件的标签中，用v-on（@符号）绑定一个内置事件，将上面的事件处理函数赋值给这个事件

 @click="func"

父组件

在methods中定义一个处理函数Func，设置形参（e或者Val）接收来自子组件共享过来的数据，在函数体中处理这些数据

 Func(e){  console.log(e); //处理这些数据的操作 }

子组件标签中使用v-on（@符号）绑定一个事件（子组件中定义的自定义事件sonFn）

将刚刚定义的处理函数Func赋值给这个自定义事件

 @sonFn = "Func"

---

兄弟之间（或离得比较远的父子组件之间）数据共享----------EventBus

数据发送方

导入eventBus.js

定义一个内置事件，赋一个事件处理函数

事件处理函数的函数体中，通过bus.$emit('自定义事件', 要发送的数据)

一旦触发这个内置事件，就把共享数据发送过去

eventBus.js

导入Vue构造函数
import Vue from 'vue'

向外导出vue实例 new Vue()
export default

数据接收方

导入eventBus.js

定义生命周期钩子created（）{ } ，在函数体内通过bus.$on('自定义事件'，callback(Val))接收发送过来的数据

（数据发送方触发事件后），bus.$on('自定义事件'，callback(Val))，callback执行对共享过来的数据的操作**