前言
小编在上一篇博客中总结了vue中父子组件传值,回顾一下,父组件通过属性向子组件传值,子组件通过事件向父组件传值.那么不具有父子关系的组件如何进行传值操作呢?接下来请看下文~
正文
1.什么样的关系是非父子组件
我们看下图可以看出,下图中有三层组件,根组件,子组件,子组件下的子组件.
那么不具有父子组件的就是兄弟组件和根组件和最下边组件具有的关系.
1-3,3-3即为非父子组件.
2.如何实现非父子组件传值呢?
观察者模式(也叫发布订阅模式/总线模式/Bus)
首先我们创建一个全局的子组件,命名为child.我们在父组件中放置这两个child组件.如图:
然后,我们实现两个child之间的通信,当点击第一个child组件的时候,另一个组件的内容变得和第一个组件的一样.也就是 点击Dell,下边的Lee也变为Dell;点击Lee,上边的Dell也变为Lee.
- 通过传递content,来想child里传值
- 关键!! 在vue类中添加一个bus属性,这样vue实例中就都会有这个属性,起到总线的作用!
- 在子组件绑定click事件,实现刚才我们想实现的功能
- 方法里添加事件如图
解释:this.bus指的是实例上挂载的bus,即上图中的bus,bus又是vue的实例,所以就会有emit这个方法,通过emit方法,向外触发事件,事件触发的时候,还会携带this.content内容,
- 写一个生命周期钩子.组件挂载会触发的钩子
监听change事件
注意:vue有单项数据流,所以会出现错误,怎么解决,请参照我的上一篇博客~
此时此刻,就可以实现非父子组件间的传值啦!
