vue组件间的通信

vue组件间的通信主要分为三类：

◆ 父==>子

◆ 子==>父

◆ 非父子

方法其实有好几种，下面分享一下我自己用到的(๑‾ ꇴ ‾๑)

1.父==>子：

在父组件里引用子组件

图例

上图中child1就是引用的子组件，而父组件要向child1组件传递数据时，就在该子组件调用模块里定义:key=value（如上图的:parentdata="parentData"）

在子组件中，我们要接收父组件传过来的数据就要用到props

图例

如上图所示，我们通过props接收到了父组件传过来的key为parentdata的数据，并在模块里面调用key值。

2.子==>父：

上面说了父组件向子组件的通信，这里说一下子组件向父组件的通信，我们会用到$emit

图例

如上图，我们通过$emit把想传递的数据发散出去，在父组件我们要监听childVal这个动作：

图例

然后使用函数来处理一下，从而获取子组件传来的数据。

3.非父子：

非父子间的通信，即子组件与子组件间的通讯，它们的通讯需要一个作为中转站的媒介。

在main.js定义好“中转站”bus：

图例

在发送数据的子组件中

图例

在接收的子组件中

图例

大概就这么多，说得不是很详细，有总结不好的地方望指正~