vue 组件之间的数据共享

1.组件之间的关系

在项目开发中，组件之间最常见的关系分为两种：

• 父子关系
• 兄弟关系

2.父子组件之间的数据共享

2.1 父组件向子组件共享数据需要使用 自定义属性 。示例代码如下：

子组件中 msg 的值是父组件中message复制过来的，两个彼此独立的(传简单类型)
子组件中 user 传过的是对象的引用与父组件指向的是同一个内存(传复杂类型)

2.2 子组件向父组件共享数据使用 自定义事件 。示例代码如下：

3.兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。

注意：接收方要定义在 created 里面，目的是组件一创建就要监听到，比如上面的 share

EventBus 的使用步骤

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据发送方，调用 bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件

参考资料