vue组件之间的数据共享

1. 组件之间的关系

①父子关系
②兄弟关系

2. 父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性 props:[]

1. 在子组件 先通过props自定义子级属性
2. 在父级先导入子级.vue 在注册 在通过标签的形式使用子级.vue
3. 最后在子级接收父级信息

3.子组件向父组件共享数据

子组件向父组件共享数据需要使用自定义事件 methods:{this.$emit(‘自定义事件名’,this.数值)}
① 在子组件的data对象中定义数值
② 在子组件通过methods 自定义事件

this.$emit(‘自定义事件名’,this.子组件数值)

③ 父组件 先导入子组件.vue->注册子组件->利用标签使用子组件
④ 使用子组件标签的时候，调用自定义事件
⑤ 在父组件data中定义接收的数值变量 在methods中定义接收子组件数值的函数 通过val进行传参

4. 兄弟组件之间的数据传递

EventBus的使用步骤
① 创建eventBus.js模块，并向外共享一个Vue的实例对象
② 在数据发送方，调用如下方法触发自定义事件

bus.$emit(‘事件名称’,要发送的数据)

③ 在数据接收方，在created对象中调用如下方法注册一个自定义事件

bus.$on(‘事件名称’,事件处理函数)