很長一段時間在vue開發專案中元件間通訊都是通過vuex實現的，有時候開發一個小專案也要用到插入笨重的vuex來實現元件間互動，有沒有一個好的外掛可以替代vuex，emmmm~，當然有了！今天給大家介紹一下PubSubJS，PubSubJS是什麼？可以實現什麼功能？看下面的例子實現關閉彈窗model1

主頁面index.vue程式碼如下

export default { 

  data() {
	   return {
	     box: {model1:false}
	   }，
  created() {
	//訂閱關閉彈窗事件 引數event指"model-close"，沒什麼用
	 PubSub.subscribe("model-close", (event, data) => {
	 this.close(data.modal);
	 console.log(data.mess) //列印"關閉彈窗"
   	 }); 
   }，
   methods: {
	  close(model) {
	        this.box[model]=false
	  }
   }}

 

model1.vue元件

export default{
	data(){
		return{}
	},
	methods:{
		close(){
		    //釋出關閉彈窗事件
		   PubSub.publish("model-close", {model:"model1",mess:"關閉彈窗"});
		}
	}
}

上面簡單的程式碼就實現了子元件和父元件通訊功能，你可能很不屑得說，vue自帶的on和emit不就可以實現這個功能幹嘛搞這麼麻煩，對的，on和emit的確也可以實現了子元件和父元件通訊，但是如果是非父子元件通訊呢，用on和emit實現是不是就顯得很繁瑣了，另外PubSubJS不依賴於任何庫和不限於任一框架

不管是父子之間還是非父子之間通訊PubSubJS都可以實現，但是必須先執行訂閱事件subscribe然後才能publish釋出事件

原始碼地址：https://github.com/mroderick/PubSubJS

作者：沫沫小
來源：CSDN
原文：https://blog.csdn.net/qq_21430819/article/details/79237413
版權宣告：本文為博主原創文章，轉載請附上博文連結！