作为一个vue初学者,组件间的数据通信是我们不得不谈的一个重要内容。根据组件之间的关系通信方式也有不同，数据通信大致有下面三种：父传子、子传父、非父子间通信
下面，我们就来说说这三种通信
1. 父传子（父传子通过props传值，简单的说就是 props down）
这里我们使用一个简单的例子来说明下，例子的内容，是我们常见的header组件，这里我们用props传值的方式，把title的值从父组件传到子组件来，代码如下
a. 子组件代码（这边就没什么好解释的了）
b. 父组件代码（通过设置Header组件的props来把值传到子组件）
c. 代码运行结果（可以看到，在父组件内设置的title的值，已经传过来了）
2. 子传父（通过事件传递，如$emit、$on，简单的说就是 events up）
a. 父组件代码
b. 子组件代码
3. 非父子组件通信
非父子组件通信我们可以通过eventHub来实现. 所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件
a. 创建事件中心
b. 组件A代码
c. 组件B代码
4. 另外组件通信，也可以通过vuex来实现（这个不多说了）
网友评论