vue 元件間通訊 PubSub 釋出訂閱
阿新 • • 發佈:2018-12-08
很長一段時間在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
版權宣告:本文為博主原創文章,轉載請附上博文連結!