vue 消息通知组件,vue 消息总线
本文主要详细介绍了Vue组件的事件总线和消息发布订阅。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
事件总线消息发布和订阅概要介绍
简介
本文主要介绍事件总线的定义和编写方法以及Vue如何实现消息的订阅和发布。
事件总线
事件是组件之间的一种通信方式，适用于任何组件之间的通信，如两个不相关的组件、父子组件、子代组件等。
事件总线有两个特性：
它是一个vue组件实例或vue实例，充当消息中继站。如果组件A和B想要通信，则组件A将消息存储到中继站，而组件B接收该消息，反之亦然。所有组件都必须能够访问事件总线。如果组件A和B通信，如果A向B发送数据，则需要以下步骤：
大前提是你需要创建一个事件总线，通常使用vm实例本身作为事件总线，并在某个时间保存在Vue构造器的prototype对象中。因为组件实例的原型对象的原型对象=the实例的原型对象，所以所有组件实例都获得事件总线。
1.b(接收方)需要始终将自定义事件绑定到事件总线，并设置事件回调。
2.当A(发送方)要发送数据时，只需要在事件总线上触发B绑定的自定义事件，将数据传递过来即可。
main.js
//引入vue依赖
从“vue”导入Vue
//引入组件App
从导入应用程序。/App.vue
//关闭生产提示
Vue.config.productionTip=false
//创建一个vue实例
新Vue({
render: h=h(App)，
创建之前(){
//事件总线通常设置在beforeCreate生命周期函数中。
//下面的代码是将vm对象本身设置成Vue的prototype对象。属性名通常是$bus，这不是必需的。
Vue.prototype. $ bus=this
}
//为这个vue实例配置管理id为app的容器。
}).$ mount(“# app”)
App.vue:
模板
！-写作结构-
差异
答/答
整点
B/B
/div
/模板
脚本
//修改后的
//介绍组件A和组件B，涉及es模块化的语法。
从导入。/组件/A.vue
从导入B。/组件/B.vue
导出默认值{
组件：{
//注册组件
一，
B
}
}
/脚本
风格
/风格
B.vue:
模板
差异
DIV组件的名称：{{name}}/div
divA组件的名称：{{NameForA}}/div
/div
/模板
脚本
导出默认值{
data() {
返回{
姓名：叶昊聪，
名称论坛：“”
}
},
方法：{
//事件触发时的回调函数
getNameFromA(nameFromAVC){
Console.log(从组件A接收名称：，nameFromAVC)；
这个。NameForA=nameFromAVC
}
},
已安装(){
//将自定义事件绑定到事件总线。
这个。$巴士。$on(getNameFromA ，this . getname froma)；
},
销毁前(){
//通常，当组件被销毁时，需要解除绑定自定义事件。
这个。$巴士。$off(getNameFromA )
},
}
/脚本
风格
/风格
A.vue:
模板
差异
div{{name}}/div
Button @click=sendName 将Name属性的值发送给其他组件/button
/div
/模板
脚本
导出默认值{
data() {
返回{
姓名：“廖仙燕”
}
},
方法：{
sendName(){
//发送方触发事件
这个。$巴士。$emit(getNameFromA ，this . name)；
}
},
}
/脚本
风格
/风格
效果：
当组件被销毁时，通常最好取消绑定自定义事件：
消息的发布订阅
订阅与发布的定义：
1.它是组件之间的一种通信方式。
类似于消息中心，组件A在消息中心订阅一条消息，然后一旦消息组件B在消息中发布消息，组件A会立即接收消息并执行相应的回调。
通常使用第三方消息订阅发布库，这里推荐pubsub-js。
步骤1:安装依赖项：npm i pubsub-js
步骤2:在消息接收方订阅消息。
步骤3:在消息的发送方发布消息。
或者以上面的A、B两个成分为例。组件A是发送方，组件B是接收方。
第二步：
在B组件定义消息：
步骤3:在组件A中发布消息：
效果：
当组件被销毁时，通常需要取消订阅消息。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。