VUE非父子组件之间的通信
作者:互联网
利用$emit $on
的触发和监听事件实现非父子组件的通信
Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件
this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据
this.$bus.$on('自定义事件名',fn)//监听自定义事件获取数据
具体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <heads></heads> <bodys></bodys> <floor></floor> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> //bus总线 Vue.prototype.$bus = new Vue(); var heads = { template:` <div> 我是头部: <button @click="clickSay">点击底部显示消息</button> </div> `, methods: { clickSay(){ // 触发事件 this.$bus.$emit("floorSay","hello Floor!"); } } } var bodys = { template:` <div>我是身体</div> ` } var floor = { template:` <div> 我是底部 <p>{{name}}</p> </div> `, data(){ return { name:"" } }, created() { // 监听触发的事件 this.$bus.$on("floorSay",val=>{ this.name = val; }); } } new Vue({ el:"#app", components:{ heads, bodys, floor }, data:{ n: 0 }, methods:{ addnum(){ this.n++; } } }); </script> </html>
总结:非父子组件通信 解决的方案还有vuex、provide/inject是解决同根往下派发、本地存储也可以进行非父子组件之间的通信!
标签:VUE,自定义,bus,父子,var,Vue,事件,组件 来源: https://www.cnblogs.com/M87-A/p/15799440.html