?文章來源地址http://www.zghlxwxcb.cn/news/detail-609749.html
引入第三方庫pubsub.js:
npm i pubsub-jsStudent.vue
import pubsub from 'pubsub-js'
methods:{
sendStudentName(){
// this.$bus.$emit('hello',this.name)
pubsub.publish('hello',666)
}
},School.vue
import pubsub from 'pubsub-js'
mounted() {
// console.log("school",this.x)
/* this.$bus.$on('hello',(data)=>{
console.log('我是school組件，收到了數(shù)據(jù)',data)
})*/
this.pubId = pubsub.subscribe('hello',function (msgName,data){
console.log('有人發(fā)布了hello消息，hello消息的回調(diào)執(zhí)行了',msgName,data)
})
},
beforeDestroy() {
// this.$off('hello')
pubsub.unsubscribe(this.pubId)
},
}TodoList案例使用消息訂閱實現(xiàn)刪除功能：
App.vue:
import pubsub from 'pubsub-js'
mounted() {
this.$bus.$on('checkTodo',this.checkTodo)
this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
},
beforeDestroy() {
this.$bus.$off('checkTodo')
pubsub.unsubscribe(this.pubId)
}
}MyItem.vue:
import pubsub from 'pubsub-js'
methods:{
//勾選or取消勾選
handleCheck(id){
//通知App組件將對應的todo對象的done值取反
// this.checkTodo(id)
this.$bus.$emit('checkTodo',id)
},
//刪除
handleDelete(id){
if (confirm('確定刪除嗎')){ //confirm根據(jù)用戶的交互來決定到底是布爾值為真還是為假，點擊確定為真，點擊取消為假
// this.deleteTodo(id)
pubsub.publish('deleteTodo',id)
}
}
文章來源：http://www.zghlxwxcb.cn/news/detail-609749.html
?
到了這里，關于Vue消息訂閱與發(fā)布的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
