官网上的例子好晦涩，看了一个头两个大，关于非父子间的通讯问题，经过查阅得到了下面的例子，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="https://www.jb51.net/article/vue.js"></script> </head> <body> <div> <one></one> <two></two> </div> <script> //创建中央事件总线。 var bus =new Vue(); // 组件one Vue.component('one',{ template:'<button v-on:click="oneFn">点击+</button>', data:function () { return{ oneNum:0 } }, // 为组件one创建方法，用来触发事件common（common是中央事件总线bus的自定义事件名称，只需要与two中的监听事件名称一致即可。 methods:{ oneFn:function () { bus.$emit("common", this.oneNum+=1)//此处的参数即为two中监听事件中传入的参数（n），此处（触发）的this指的是组件one，而在（监听）的this指的是bus。 } } }); // 组件 two Vue.component('two',{ template:'<p>{{twoNum}}</p>', data:function () { return { twoNum:0 } }, // 为组件two创建钩子，挂载$on监听事件， created:function () { var self = this;//将this赋值给self。 bus.$on('common',function (n) { self.twoNum = n;//此处为self，表示是组件two的变量，若为this，则表示是bus的变量。 }) } }); new Vue({ el:'#app' }) </script> </body> </html>
我也是新手，刚开始自学Vue，上面有不懂的童鞋请留言，一起进步！
以上所述是小编给大家介绍的vue中的非父子间的通讯问题简单的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: