小編給大家分享一下vue組件間怎么進(jìn)行通信，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)，成都微信小程序，網(wǎng)頁設(shè)計(jì)制作，成都手機(jī)網(wǎng)站制作，營(yíng)銷型網(wǎng)站幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長(zhǎng)。

組件通信

盡管子組件可以用this.$parent訪問它的父組件及其父鏈上任意的實(shí)例，不過子組件應(yīng)當(dāng)避免直接依賴父組件的數(shù)據(jù)，盡量顯式地使用 props 傳遞數(shù)據(jù)。

另外，在子組件中修改父組件的狀態(tài)是非常糟糕的做法，因?yàn)椋?/p>

• 這讓父組件與子組件緊密地耦合；

• 只看父組件，很難理解父組件的狀態(tài)。因?yàn)樗赡鼙蝗我庾咏M件修改！理想情況下，只有組件自己能修改它的狀態(tài)。

每個(gè)Vue實(shí)例都是一個(gè)事件觸發(fā)器：

• $on()——監(jiān)聽事件。

• $emit()——把事件沿著作用域鏈向上派送。（觸發(fā)事件）

• $dispatch()——派發(fā)事件，事件沿著父鏈冒泡。

• $broadcast()——廣播事件，事件向下傳導(dǎo)給所有的后代。

監(jiān)聽與觸發(fā)

v-on監(jiān)聽自定義事件：

    
        
        
    
    
        
        
        
        

            
Messages: {{ messages | json }}
            
        
    
    
    

父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件：

    
        
        
    
    
        

          
{{ total }}
          
          
        
    
    
    

在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件?？梢允褂?.native 修飾v-on 。例如：

派發(fā)事件——$dispatch()

    
        
        
    
    
        

            
Messages: {{ messages | json }}
            
        
        

    
    
    

1. 子組件的button元素綁定了click事件，該事件指向notify方法

2. 子組件的notify方法在處理時(shí)，調(diào)用了$dispatch，將事件派發(fā)到父組件的child-msg事件，并給該該事件提供了一個(gè)msg參數(shù)

3. 父組件的events選項(xiàng)中定義了child-msg事件，父組件接收到子組件的派發(fā)后，調(diào)用child-msg事件。

廣播事件——$broadcast()

    
        
        
    
    
        

            
            Broadcast Event
            
        
        
        

    
    
    

和派發(fā)事件相反。前者在子組件綁定，調(diào)用$dispatch派發(fā)到父組件；后者在父組件中綁定，調(diào)用$broadcast廣播到子組件。

父子組件之間的訪問

• 父組件訪問子組件：使用$children或$refs

• 子組件訪問父組件：使用$parent

• 子組件訪問根組件：使用$root

$children：

$ref可以給子組件指定索引ID：

效果與$children相同。

$parent：

如開篇所提，不建議在子組件中修改父組件的狀態(tài)。

非父子組件通信

有時(shí)候非父子關(guān)系的組件也需要通信。在簡(jiǎn)單的場(chǎng)景下，使用一個(gè)空的 Vue 實(shí)例作為中央事件總線：

var bus = new Vue()
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
    // ...
})

看完了這篇文章，相信你對(duì)vue組件間怎么進(jìn)行通信有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！