當前位置:吉日网官网 - 傳統美德 - vue組件之間的通信

vue組件之間的通信

在父組件頁面使用v-bind:或:將數據傳遞給子組件,子組件通過props獲取父組件傳遞的值。

當多級組件嵌套需要傳遞數據時,常用的方法是通過vuex。但如果只傳輸數據不做中間處理,用vuex處理就有點大材小用了。為此,Vue 2.4版提供了另壹種方法——$ attrs;

示例:

我們傳遞5個屬性給子組件son,然後子組件son傳遞4個屬性給孫子組件Sunday(這4個組件除了傳遞什麽都不做),從son組件傳遞給孫子組件的4個屬性可以是v-bind=$attrs。

通常與$attrs連用。

簡單地說,使用interitAttrs: false子組件的$attrs不會作為html屬性呈現給根元素,這樣可以防止修改同名的html屬性。

用這個。子組件頁面中的$emit('自定義事件名稱',數據);將數據傳遞給父組件,父組件通過@ custom event name = " event handling method name "或v-on:custom event name = " event handling method name "獲取子組件傳遞的值。

如果公共組件被很多組件調用,拋出的自定義事件不壹樣,此時可以使用$ listeners根據父組件調用的事件決定要引發哪個自定義事件。

EventBus也叫事件總線。在Vue中,EventBus的概念可以作為壹個通信橋梁,就像所有的組件* * *都使用同壹個事件中心,可以註冊發送事件或者接收事件,所以所有的組件都可以並行上下通知其他組件,但是太方便了,所以如果使用不慎,就會造成難以維護的災難。所以需要壹個更完善的Vuex作為狀態管理中心,把通知的概念上升到* * *的層面。更多EventBus

Vuex官網

Vuex實現了單向數據流,它有壹個狀態來全局存儲數據。當壹個組件想要改變狀態中的數據時,它必須通過突變來實現。Mutation還為外部插件提供了訂閱者模式,以便調用來獲取狀態數據的更新。但是當所有異步操作(通常是調用後端接口異步獲取更新數據)或者批量同步操作需要采取動作,但是動作不能直接修改狀態,狀態的數據仍然需要通過變異來修改。最後根據狀態的變化,渲染到視圖中。

提供/註入官方網站介紹

Vue2.2.0增加了API,需要壹起使用才能讓壹個祖先組件給它所有的後代註入壹個依賴關系,不管組件層次有多深,當它的上下遊關系建立後總會生效。如果妳熟悉React,這和React的上下文特征非常相似。

提供/註入API主要解決跨級組件之間的通信問題。官網提供了非常詳細的介紹,這裏是正上方的圖片。

從圖8-1可以看出,這個。$children獲取vue real列的數組。

從圖8-2可以看出,這。$parent獲取直接父實例。

從圖8-3可以看出,這。$refs返回用ref註冊的對象。

SessionStorage和localStorage也可以通信,但是需要監控存儲的變化。如何監控存儲的變化,之前在這篇文章裏已經寫過了,這裏就不贅述了。

vue組件之間的六種通信方式

  • 上一篇:SEO優化的內容包括哪些
  • 下一篇:商朝的主要書寫工具是什麽?
  • copyright 2024吉日网官网