這篇文章主要介紹了vue組件通信的方式有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue組件通信的方式有哪些文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)-專業(yè)網站定制、快速模板網站建設、高性價比來安網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式來安網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋來安地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

具體方法如下：

1.使用props/$emit實現(xiàn)父子組件通信

props：props是用于接收來自父組件通過v-bind傳遞的數(shù)據(jù)，當props為數(shù)組時，直接接收父組件傳遞的屬性；當props為對象時，可以通過type、default、required、validator等配置來設置屬性的類型、默認值、是否必傳和校驗規(guī)則。

$emit：在進行父子組件通信時，可以使用$emit來觸發(fā)父組件v-on在子組件上綁定相應事件的監(jiān)聽。

2.使用$refs/$parent/$children/$root實現(xiàn)父子組件通信

$refs：可以將$refs綁定DOM元素，在獲取DOM元素的attributes屬性，也可以將$refs綁定子組件，從而獲取子組件實例。

$parent：vue中可以直接通過this.$parent來獲取當前組件的父組件實例。

$children：vue中可以直接通過this.$children來獲取當前組件的子組件實例的數(shù)組。

$root：在獲取當前組件樹的根vue實例時，若當前實例沒有父實例，可以通過$root實現(xiàn)組件之間的跨級通信。

3.使用$attrs/$listener實現(xiàn)隔代組件通信

$attrs：$attrs是用來接收父作用域中不作為prop被識別的attribute屬性，且可以通過v-bind="$attrs"傳入內部組件，常用于創(chuàng)建高級別的組件。

$listeners：$listeners中包含了父作用域中的 v-on 事件監(jiān)聽器，可以通過可以通過 v-on="$listeners" 傳入內部組件，常用于創(chuàng)建更高層次的組件。

4.使用provide/inject實現(xiàn)隔代組件通信

provide：provide是一個對象或是一個返回對象的函數(shù)，其對象包含可注入其子孫的property，即要傳遞給子孫的屬性和屬性值。

injcet：當injcet為字符串數(shù)組時，接收的屬性會由data變成provide中的屬性；當injcet為為對象時，可以通過配置default和from等屬性來設置默認值，在子組件中使用新的命名屬性等。

5.使用Vuex實現(xiàn)父子、隔代、兄弟組件通信

Vuex是一個Vue.js應用程序開發(fā)的狀態(tài)管理模式，其采用集中式存儲管理應用的所有組件的狀態(tài)，當組件從store中讀取狀態(tài)的時，若store中的狀態(tài)發(fā)生變化，相應的組件也會得到高效更新。

6.使用eventBus實現(xiàn)父子、隔代、兄弟組件通信

eventBus是事件總線，是注冊一個新的vue實例，在調用這個實例的$emit和$on等來監(jiān)聽和觸發(fā)這個實例的事件，通過傳入?yún)?shù)從而實現(xiàn)組件的全局通信。

關于“vue組件通信的方式有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue組件通信的方式有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。