晨曦是朝气蓬勃的美少女,在你耳畔浅吟低唱,她身上带有露珠草香的味道,会飘香你一整天的心情,祝你每一天都!你多学一样本事,就少说一句求人的话。
官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head> <body> <div id="app"> <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中的非父子间的通讯问题简单的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
到此这篇关于vue中的非父子间的通讯问题简单的实例代码就介绍到这了。自得时应善待他人,由于你失意时会须要他们。更多相关vue中的非父子间的通讯问题简单的实例代码内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!