作为一个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来实现(这个不多说了)