上一篇：（三十二）Vue之全局事件總線

消息訂閱與發(fā)布

理解

這種方式的思想與全局事件總線很相似，一種組件間通信的方式，適用于任意組件間通信。
它包含以下操作:

• (1) 訂閱消息 --對應(yīng)綁定事件監(jiān)聽
• (2) 發(fā)布消息 --分發(fā)事件
• (3) 取消消息訂閱 --解綁事件監(jiān)聽

需要引入一個消息訂閱與發(fā)布的第三方實現(xiàn)庫: PubSubJ
在線文檔: https://github.com/mroderick/PubSubJS

使用步驟

第一步：使用npm i pubsub-js把第三方實現(xiàn)庫PubSubJ安裝
第二步：在用到的組件使用import pubsub from 'pubsub-js'引入
第三步：接收數(shù)據(jù)

	methods(){demo(data){......}}mounted() {this.pid = pubsub.subscribe('xxx',this.demo) //訂閱消息}

第四步：提供數(shù)據(jù)

pubsub.publish('xxx',數(shù)據(jù))

第五步：在beforeDestroy鉤子中取消消息訂閱

PubSub.unsubscribe(pid)

改造TodoList為消息訂閱與發(fā)布

我們把給Item組件與App組件的交互從全局事件總線替換成消息訂閱與發(fā)布
第一步：使用npm i pubsub-js安裝
第二步：在Item組件與App組件使用import pubsub from 'pubsub-js'引入
第三步：Item組件接收數(shù)據(jù)

  methods:{handleCheck(id){//console.log(id)//通知App組件將對應(yīng)的todo對象的done取反//this.checkTodo(id)//this.$bus.$emit('checkTodo',id)pubsub.publish('checkTodo',id)},handleDelete(id){if (confirm('確定刪除嗎？')) {//通知App組件將對應(yīng)的todo對象//console.log(id)//this.deleteTodo(id)//this.$bus.$emit('deleteTodo',id)pubsub.publish('deleteTodo',id)}}}

第四步：App組件提供數(shù)據(jù)

	mounted() {/*this.$bus.$on('checkTodo',this.checkTodo)this.$bus.$on('deleteTodo',this.deleteTodo)*/this.pubId1 = pubsub.subscribe('checkTodo',this.checkTodo)this.pubId2 = pubsub.subscribe('deleteTodo',this.deleteTodo)}

第五步：App組件在beforeDestroy鉤子中取消消息訂閱

	beforeDestroy() {/*this.$bus.$off('checkTodo')this.$bus.$off('deleteTodo')*/pubsub.unsubscribe(this.pubId1)pubsub.unsubscribe(this.pubId2)}