vue2.0 兄弟组件(平级)通讯的实现代码

vue2.0 兄弟组件(平级)通讯的实现代码

1、前戏吧

先看看前两篇文章：

父组件传给子组件

子组件传给父组件

看图 看图 看图！！！

个人理解：

这明显是生活中弟弟打电话哥哥一样，双方都需要手机，需要信号发射塔。

弟弟 => A组件

哥哥 => B组件

弟弟的手机 => $emit发送数据

哥哥的手机 => $on监听并接收数据

信号发射塔 => 中间事件线

App.vue => 不用说都知道是地球

2、 代码

2.1、在src/asstes下新建中间事件线ligature .js （注意后缀.js）

import Vue from 'Vue'

export default new Vue;

2.2、在src/components新建A.vue

点一下就传

import bus from '../assets/ligature';

export default {

methods: {

spot: function() {

//监听A组件中的spot，并发送数据

bus.$emit("spot", ' 没想到吧！！我是A组件')

}

}

}

2.3、在src/components新建B.vue

结果:{{msg}}

2.4、修改App.vue (地球),注册这两个组件，并添加这两个组件的标签

3、效果

总结

以上所述是给大家介绍的vue2.0 兄弟组件(平级)通讯的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。