關於Vue的各種通訊方式

2021-09-24 09:31:28 字數 1405 閱讀 8125

vue通訊應該是乙個老生常談的問題,面試也經常會有相關的問題,我之前作答往往是prop父傳子,emit子傳父,vuex複雜元件之間通訊,bus全域性通訊如果不採用vue的通訊方式我們還可以使用web儲存(不推薦),自我感覺已經算很完美的回答了呀,現在想想可真的太無知了,今天詳細介紹一下vue各種通訊方式

上面幾種通訊都是最基礎的建議移步vue官網查閱

provide和inject偏冷門的乙個api可以跨層級通訊,向下傳遞也就是說可用於給後輩傳遞資訊

provide: ,
chid或者grandchild

inject: ["title"]

根據獲取$parent獲取父級元素來通訊

main.js

// dispatch從小往上傳遞資料

vue.prototype.$dispatch = function (eventname, data)

}

grandchild

通知父元件

methods:

}

mounted() ); 

},

根據獲取$chidren向下查詢傳遞資料

main.js

vue.prototype.$boardcast = function (eventname, data) 

function boardcast(eventname, data)

});}

grandchild或者child

boardcast}

mounted() );

},

// 一級元件home

我是一級元件

// 二級元件 helloworld

我是二級元件

**// **元件hellochild

我是**子元件

在子元件中通過this.$parent獲取父元件的方法和data資料,

在父元件中通過this.$children獲取的是所有子元件

vue.component("child", }

改變父元件資料

', data()

}, method:

}})vue.component("parent", ,

method:

}})

兄弟,父子,外甥都可以使用bus進行通訊

詳細操作

vue父子通訊的方式

最近團隊在做 vue專案 層面上的優化。在此整理下vue父子元件通訊的方式。大綱 幾種通訊方式無外乎以下幾種 父元件 子元件 click 在子元件內 triggerclick this.emit update name newval update name其中name表示要更新的 prop 值。當然...

vue的元件通訊的方式

關於vue元件相互通訊的幾種方式如下 父元件通過props向下傳遞資料給子元件,子元件通過event給父元件傳送訊息,實際上就是子元件把自己的資料傳送給父元件。第一種方式處理父子元件之間的資料傳輸有乙個問題 如果父元件a下面有子元件b,元件b下面有元件c,這時如果元件a想傳遞資料給元件c怎麼辦呢?如...

Android 裡的各種通訊方式(四)

五 廣播 android開發中如果需要對兩個完全沒關係的程式之間進行通訊 就可以使用傳送廣播與接收廣播的機制來實現 例如程式a傳送了乙個廣播 程式b接受到 做一些事情 這樣就達到了相互的通訊。public class broadcastactivity extends activity else i...