网站建设的公司哪家便宜,wordpress 重定位,网络推广建议,百度关键词点击器1.知识点 是一种组件间通信的方式#xff0c;适用于任意组件间通信 2.使用步骤 “消息订阅与发布”可依赖的第三方很多#xff0c;这里使用pubsub-js库 1.安装pubsub#xff1a;npm i pubsub-js 2.引入#xff1a;import pubsub from pubsub-js 3.接收数据#xff1a;A组件…1.知识点 是一种组件间通信的方式适用于任意组件间通信 2.使用步骤 “消息订阅与发布”可依赖的第三方很多这里使用pubsub-js库 1.安装pubsubnpm i pubsub-js 2.引入import pubsub from pubsub-js 3.接收数据A组件想接收数据则在A组件中订阅消息订阅的回调留在A组件中 methods(){ demo(data){......} } ...... mounted(){ this.pid pubsub.subscribe(xxx,this.demo) //订阅消息 } 4.提供数据 pubsub.publish(xxx,数据) 5.最好在beforeDestroy钩子中用pubsub.unsubscribe(pid)取消订阅 问题“全局事件总线”和“消息订阅与发布”都可以实现任意组件间通信那用哪个好 答案推荐使用“全局事件总线”因为它是vue提供的完全使用的vue技术而“消息订阅与发布”则是第三方。
使用语法 消息订阅 语法 import pubsub from pubsub-jsmounted() {
this.pubId pubsub.subscribe(hello,(msgName,data){// console.log(有人发布了hello消息hello消息的回调执行了,msgName,data) //msgName为事件名hello data才是接收到的数据
})
},
beforeDestroy() {// this.$bus.$off(hello) pubsub.unsubscribe(this.pubId) //这里注意不是跟全局事件总线一样是hello事件名
}消息发布 语法 import pubsub from pubsub-jspubsub.publish(hello,666)3.注意点 1.取消订阅方式和“全局事件总线”不同取消订阅指定订阅返回的id且每次返回的id都不同而“全局事件总线”指定的是“自定义事件名称” 2.订阅回调配置一定要使用箭头函数或者外部定义方法在订阅中引用也行千万不要使用普通函数因为普通函数中this不指代vc而是undefine这一点跟“全局事件总线”中的注意点很像但还是略有不同 3.消息订阅会接收到2个参数第1个参数为消息名称第2个参数才是传递过来的值如写法1但是实际msgName参数1他跟用不到它所以可使用下划线“_”占个位如写法2 写法一
this.pubId pubsub.subscribe(hello,(msgName,data){// console.log(有人发布了hello消息hello消息的回调执行了,msgName,data)
})写法二
this.pubId pubsub.subscribe(hello,(_,data){// console.log(有人发布了hello消息hello消息的回调执行了,_,data)
})4.箭头函数中的名称(msgName,data){}可以随便写但是避免使用使用关键字名字 完整代码
Student.vue(发布方)
templatediv classstudenth2学生姓名{{name}}/h2h2学生性别{{sex}}/h2button clicksendStudentName把学生名给School组件/button/div
/templatescriptimport pubsub from pubsub-jsexport default {name:Student,data() {return {name:张三,sex:男,}},mounted() {// console.log(Student,this.x)},methods: {sendStudentName(){// this.$bus.$emit(hello,this.name)pubsub.publish(hello,666)}},}
/scriptstyle langless scoped.student{background-color: pink;padding: 5px;margin-top: 30px;}
/styleSchool.vue(订阅方)
templatediv classschoolh2学校名称{{name}}/h2h2学校地址{{address}}/h2/div
/templatescriptimport pubsub from pubsub-jsexport default {name:School,data() {return {name:尚硅谷,address:北京,}},mounted() {// console.log(School,this)/* this.$bus.$on(hello,(data){console.log(我是School组件收到了数据,data)}) */this.pubId pubsub.subscribe(hello,(msgName,data){console.log(this)console.log(有人发布了hello消息hello消息的回调执行了,msgName,data)})},beforeDestroy() {// this.$bus.$off(hello)pubsub.unsubscribe(this.pubId)},}
/scriptstyle scoped.school{background-color: skyblue;padding: 5px;}
/style参考文章vue2知识点消息订阅与发布_vue2消息订阅与发布_刘大猫.的博客-CSDN博客
