這篇文章將為大家詳細講解有關vue組件通信的方法是什么,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務領域包括:網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的渦陽網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!
vue 的組件化應該是其最核心的思想了,無論是一個大的頁面還是一個小的按鈕,都可以被稱之為組件。基于 Vue 的開發(fā),就是在寫一個個組件,無論是基礎組件還是業(yè)務組件,最后都是要拼裝在一起。按照組件的層級關系,可以把組件之間的關系歸納為:父子關系、隔代關系、兄弟關系,無關聯(lián)關系。
$ref 、$parent 、$children
基于當前上下文的,可以通過 $ref 、$parent 、$children 訪問組件實例,可以直接調(diào)用組件的方法或訪問數(shù)據(jù)。其中 $parent 可以訪問當前組件的父組件,$children 可以訪問當前組件的所有子組件。雖然 $parent 和 $children 都可以獲取組件實例,但是它們無法在跨級或兄弟間通信,這是它們的缺點。
provide 、inject
provide / inject 是 Vue 在 2.2.0 版本后新增的 API。
這對選項需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下游關系成立的時間里始終生效。
也就是在父組件中提供一個值,并且在需要使用的子孫組件中注入改值,即:
// Parent.vue export default { provide() { return { name: 'Stone' } } } // Child.vue export default { inject: ['name'], mounted() { console.log(this.name) } }
不僅僅是 Child.vue ,只要是 Parent.vue 的子組件,無論隔多少代,都可以通過這個的方式注入。 這種多級組件透傳的方式可以保證單向數(shù)據(jù)流的清晰性,例如像用戶信息這樣的全局信息,就可以借助這兩個 API 來完成,而沒有引入第三方庫 vuex。
替代 Vuex
vuex 是把數(shù)據(jù)集中管理,然后哪里需要就在哪里獲取,按照這個思路,我們可以在根組件 App.vue 中注入全局信息,并且在頁面的任何地方使用。
// App.vueexport default { provide() { return { userInfo: this.user } }, data() { return { user: {} } }, methods: { getUserInfo () { $.ajax('/user/info', (data) => { this.user = data }) } } }
把整個 App.vue 的實例 this
對外提供, 這樣其他頁面就可以通過 this.userInfo
來獲取用戶信息。
{{ userInfo }}
$dispatch 、 $broadcast
這兩個 API 是 Vue 1.0 版本的,$dispatch 用于向上級派發(fā)事件,$broadcast 用于向下級廣播事件的,它們在 2.0 版本中已經(jīng)被廢棄了。
因為基于組件樹結(jié)構(gòu)的事件流方式有時讓人難以理解,并且在組件結(jié)構(gòu)擴展的過程中會變得越來越脆弱。
不過我們可以自行實現(xiàn) dispatch 和 broadcast 方法,用于組件的跨層級通信。它們實現(xiàn)的關鍵在于如何正確找到所要通信的組件,也就是通過匹配組件的 name 選項向下或向上查找組件。
這兩個方法都需要傳遞 3 個參數(shù),第一個參數(shù)是要通信組件的 name 選項值,第二個是自定義事件名稱,第三個是要給通信組件傳遞的值。在 dispatch 里,通過 while 循環(huán)不斷向上查找父組件,直到查找到 componentName 與某個父級組件的 name 選項匹配時結(jié)束,此時改父組件就是要通信的組件。 broadcast 方法與 dispatch 類似,是通過 forEach 循環(huán)向下查找子組件。 最后封裝一個 mixins 來便于復用。
// emitter.js function broadcast(componentName, eventName, params) { this.$children.forEach(child => { const name = child.$options.name; if (name === componentName) { child.$emit.apply(child, [eventName].concat(params)); } else { broadcast.apply(child, [componentName, eventName].concat([params])); } }); } export default { methods: { dispatch(componentName, eventName, params) { let parent = this.$parent || this.$root; let name = parent.$options.name; while (parent && (!name || name !== componentName)) { parent = parent.$parent; if (parent) { name = parent.$options.name; } } if (parent) { parent.$emit.apply(parent, [eventName].concat(params)); } }, broadcast(componentName, eventName, params) { broadcast.call(this, componentName, eventName, params); } } };
通過 mixins 混入組件,實現(xiàn)組件間的通信。
相比 Vue 1.0 版本內(nèi)置的兩個 API,自行實現(xiàn)的方法有以下不同:
在 vue 中組件的通信還有其他的手法,例如:
props
、$emit
{{info.name}}
父組件將自己的方法傳遞給子組件,子組件調(diào)用方法傳數(shù)據(jù)給父組件使用event bus事件總線$attrs 、$listenersVue 2.4 新增的 API。
$attrs 包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。
$listeners 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。Vuex 集中式狀態(tài)管理
寫在最后
不同的通信方法適用于不同的場景,既可以通過 Vue 內(nèi)置的 API 來通信,也可以通過自定義事件的方式實現(xiàn)通信方法,當應用足夠復雜情況下,就可以使用 Vuex 進行數(shù)據(jù)管理。
關于vue組件通信的方法是什么就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。