一起做陶瓷的网站,菏泽网站建设,网站公告模板代码,电商产品推广方案范文今天学习了Vue的全局事件总线和消息订阅与发布#xff0c;它们两个都是为了实现任意组件之间的通信#xff0c;全局事件总线是利用了Vue的一个重要的内置关系#xff0c;就是组件构造函数原型的对象原型指向的是Vue原型#xff0c;知道这个重要的指向之后#xff0c;我们通…今天学习了Vue的全局事件总线和消息订阅与发布它们两个都是为了实现任意组件之间的通信全局事件总线是利用了Vue的一个重要的内置关系就是组件构造函数原型的对象原型指向的是Vue原型知道这个重要的指向之后我们通过给Vue实例对象身上添加一个组件可以使用的Vue原型这样new出来的组件实例对象就可以通用原型链找到我们给它添加的Vue原型为什么要这样添加呢因为从控制台中打印Vue实例对象的this身上有$on、$emit、$off的方法从而得知只要组件拥有Vue原型就可以使用这些方法了而消息订阅与发布是使用第三方库去实现组件之间的通信。
使用全局组件总线具体的步骤首先第一步是安装全局事件总线需要到main.js文件中的Vue实例对象中给Vue实例对象添加一个名为$bus这个可以自定义但bus有总线的意思所以习惯使用bus这个单词
new Vue({......beforeCreate(){Vue.prototype.$bus this //安装全局事件总线$bus就是当前应用的vm
}......
})
第二步就是使用事件总线这里需要两个组件之间来进行才能接收数据接收数据A组件想接收数据则在A组件中给$bus绑定自定义事件事件的回调留在A组件自身。
// A组件
methods:{demo(data){......}
}
......
mounted(){this.$bus.$on(xxx,this.demo)
}
接下来就是提供数据的组件
// B组件
this.$bus.$emit(xxx,传给A的数据)
最后为了避免占有资源组件删除了但绑定的事件还没有删除所以在我们最好在销毁组件的deforeDestroy钩子中用$off去解绑当前组件所用到的事件。
还有一种组件组件间通信的方式是通过消息订阅与发布pubsub这里需要使用到第三方库但能实现这个功能的第三方库非常多它们的语法也略有不同但这里就使用 pubsub-js这个第三方库来举例子。
第一步首先是安装第pubsub-js三方库在cmd控制台输入npm i pubsub-js命令进行下载。
第二步需要在订阅和发布的两个组件中去引入pubsub-js库。
import pubsub from pubsub-js
第三步接收数据在接收组件中配置好A组件想要接收数据则在A组件中订阅消息订阅的回调留在A组件自身。
// A组件
methods(){demo(data){......}
}
......
mounted(){this.pid pubsub.subscribe(xxx,this.demo) //订阅消息
}
第四步在提供数据组件中去触发在A组件配置好的事件名xxx。
pubsub.publish(xxx,传给A的数据)
同样为了删除组件之后事件占用资源的问题最好在beforeDestroy钩子中使用pubsub提供的删除方法PubSub.unsubscribe(pid)去取消订阅。
