vuejs事件中心管理組件間的通信詳解
更新時間：2017年08月09日 10:40:57 作者：CooMark
這篇文章主要為大家詳細介紹了vuejs事件中心管理組件間的通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了vuejs事件中心管理組件間的通信，供大家參考，具體內(nèi)容如下
事件中心
這個可以是一個空的全局的Vue實例，其他的組件利用這個實例emit和on自定義事件，這樣組件定義了自己的事件處理方法。
import Vue from 'Vue' window.eventHub = new Vue();
事件監(jiān)聽和注銷監(jiān)聽
事件監(jiān)聽應(yīng)在更組件的created鉤子函數(shù)中進行，在組件銷毀前應(yīng)注銷事件監(jiān)聽
//hook
created: function () {
//listen event
window.eventHub.$on('switchComments',this.switchComments);
window.eventHub.$on('removeIssue',this.removeIssue);
window.eventHub.$on('saveComment',this.saveComment);
window.eventHub.$on('removeComment',this.removeComment);
//get init data
var that =this;
axios.get('issue/index')
.then(function (resp) {
that.issue_list=resp.data;
});
},
beforeDestroy: function () {
window.eventHub.$off('switchComments');
window.eventHub.$off('removeIssue');
window.eventHub.$off('saveComment');
window.eventHub.$off('removeComment');
}
子組件的emit事件，注意這里用的window.$emit而不是this.emit
methods: {
removeComment: function(index,cindex) {
window.eventHub.$emit('removeComment', {index:index, cindex:cindex});
},
saveComment: function(index) {
window.eventHub.$emit('saveComment', {index: index, comment: this.comment});
this.comment="";
}
},
Note: 這其實還不是最理想的通信方式，下一篇我們看看vuex怎么玩
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue3+Vite使用雙token實現(xiàn)無感刷新，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue大屏自適應(yīng)的實現(xiàn)方法(cv就能用)
最近在用VUE寫大屏頁面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
凡是做SPA的項目,特別是移動端的SAP項目,首屏加載速度必定是一個繞不過去的話題,下面這篇文章主要給大家介紹了關(guān)于Vue頁面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下2021-12-12
Vue?router應(yīng)用問題實戰(zhàn)記錄
vue-router是vue.js官方的路由插件,他和vue.js是深度集成的適合構(gòu)建單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue?router應(yīng)用問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue中$emit傳遞多個參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個參(arguments和$event)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
Vue使用vue-pdf實現(xiàn)PDF文件預(yù)覽
這篇文章主要為大家詳細介紹了Vue如何使用vue-pdf實現(xiàn)PDF文件預(yù)覽的功能，文中的示例代碼講解詳細，具有一定的參考價值，感興趣的可以了解一下2023-03-03
這篇文章主要介紹了vue如何實現(xiàn)無縫輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue之計算屬性的相關(guān)知識，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-06-06