扫码关注官方订阅号
认证高级PHP讲师
非父子组件通信，使用$on监听，使用$emit触发。但是组件是相互独立的，而使用$emit获得$on传递的参数的关键是2者必须拥有公共的实例。所以这里，我们需要单独新建一个公共实例文件：bus.js（名字随便取）。然后把bus实例分别传给需要通信的2个组件。最后，利用bus的实例实现组件通信：bus.$on传数据给bus.$emit。
我也是看官网例子没弄明白，自己捣鼓了1天才实现了组件通信，思路大概是这样。如有错误，希望大神们纠正。
新建 bus.js:
bus.js
import Vue from 'vue' export var bus = new Vue()
再在组件里面： import bus from 'bus.js'
import bus from 'bus.js'
可以使用node中的eventemitter，通过on绑定事件，emit发射事件，不受组件层级控制，这个是注册到全局的。
官方的例子应用场景仅局限在同一个模块中.如果你用模块化编程,那么你在a模块中定义的bus,在b模块中是无法访问的.
解决方法有很多,直接弄一个全局bus的模块,那里需要就import下.或者更偷懒点,直接挂在vue的原型上,import都免去了
//Zeus(宙斯，全局发号施令，好霸气！) Vue.prototype.Zeus = new Vue() //在其他模块中使用 this.Zeus.$on('event_name', (data)=> {console.log(data)}) this.Zeus.$emit('event_name', 'send data')
当然这个方案也不完美。因为Vue的事件系统不支持晚绑定。所以我决定自己撸一个支持晚绑定的，然后挂在Vue原型上给自己用。 懒得折腾他的插件系统了。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
5
462
收藏
非父子组件通信，使用$on监听，使用$emit触发。但是组件是相互独立的，而使用$emit获得$on传递的参数的关键是2者必须拥有公共的实例。所以这里，我们需要单独新建一个公共实例文件：bus.js（名字随便取）。然后把bus实例分别传给需要通信的2个组件。最后，利用bus的实例实现组件通信：bus.$on传数据给bus.$emit。
我也是看官网例子没弄明白，自己捣鼓了1天才实现了组件通信，思路大概是这样。如有错误，希望大神们纠正。
新建
bus.js:再在组件里面：
import bus from 'bus.js'可以使用node中的eventemitter，通过on绑定事件，emit发射事件，不受组件层级控制，这个是注册到全局的。
官方的例子应用场景仅局限在同一个模块中.
如果你用模块化编程,那么你在a模块中定义的bus,在b模块中是无法访问的.
解决方法有很多,直接弄一个全局bus的模块,那里需要就import下.或者更偷懒点,直接挂在vue的原型上,import都免去了
当然这个方案也不完美。因为Vue的事件系统不支持晚绑定。所以我决定自己撸一个支持晚绑定的，然后挂在Vue原型上给自己用。 懒得折腾他的插件系统了。