組件通信的8種方式,你搞清楚了嗎?

語言: CN / TW / HK

本文已參與「掘力星計劃」,贏取創作大禮包,挑戰創作激勵。

我們都知道vue是組件化開發思想,所以組件通信就是vue的基本功,在講組件通信之前,我們先來回答幾個問題,驗證一下你在日常的工作中是否具備組件化開發思想。

1.父組件如何向子組件傳值?

2.子組件如何向父組件傳值?

3.任意組件之間如何傳值?

4.父組件如何調用子組件裏面的方法?

5.子組件如何調用父組件裏面的方法?

6.任意組件之間如何調用組件裏面的方法?

驗證方式:

①如果每個問題你都能至少回答出一種方式,説明你在日常的開發工作中,基本具備了組件化開發思想。

②如果每個問題你能回答出多種方式,並能説出每種方式的的優缺點,説明你完全具備了組件化開發思想。

③如果你部分問題回答不上來,或者模糊不清,那説明你在日常工作中欠缺組件化開發思想。

我知道有的人一定不服!東東吖,你怎麼就能通過這幾個問題來判斷我是否具備組件化開發思想呢?

別急,這麼説吧,我説的組件化開發思想不是簡單的從UI框架上覆制代碼全部堆在一個文件哦,雖然那也是一個組件,但我並不認為那是真正的組件化開發思想,如果你非要説那就是組件化開發,那打擾了!!!

組件分為頁面級組件、項目公共組件、模塊公共組件,甚至可以封裝成button級別的組件。

如果你在日常的開發中具備組件化開發思想,那麼你一定會遇到上面6個問題。

先來看這張圖,大家都經常看需求文檔,這張圖不需要我講解了吧。

image.png

下面,我將來回答上面的6個問題,也是我自己最常用的方式。

1.父組件如何向子組件傳值?

父組件通過props向父組件傳值。

前置條件:index代表父組件,Children代表子組件。

父如何傳?

父組件裏面的data定義了一條數據msg,通過熟悉msg傳給子組件。=前面的屬性是傳給子組件的,=後面的值是data裏面引用過來的。

image.png

子如何接收?

子組件通過props接收父組件傳過來的值,用法和在data裏面一樣,在temple裏面直接可以{{}},在方法直接用this.屬性。

image.png

效果:

image.png

2.子組件如何向父組件傳值?

子組件通過$emit觸發自定義事件。

子如何傳?

子組件通過$emit觸發定義在父組件裏面的自定義事件,他可以傳兩個值,第一個是自定義事件名,第二個是要傳遞的值。

image.png

父如何接收?

父組件在自定義的事件裏面就可以接收到子組件傳過來的值,並把他賦值給data裏面,渲染到頁面上。

image.png

效果:

image.png

3.任意組件傳值?

任意組件傳值通過中央事件總線$bus

前置條件:AA組件叫A組件,BB組件叫B組件,雖然這裏是兄弟關係,其實A組件和B組件之間沒有任何關係也可以用這種方式。

定義中央事件總線,掛載到vue實例上。

image.png

A組件如何發送?

通過this.$bus.$emit發送

image.png

B組件如何接收?

通過this.$bus.$on接收

image.png

父組件調子組件裏面的方法?

ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實例,可以通過實例直接調用組件的方法或訪問數據 通過ref綁定組件,通過this.$refs.組件名.方法名,調用子組件裏面的方法

父組件:

image.png

子組件:

image.png

效果:

image.png

子組件調用父組件的方法?

子傳父其實幹了兩件事:第一:把這個事件踢給父組件,第二:把數據傳給父組件。第一個參數對應事件,第二個參數對應數據,第二個參數可以不傳。

子組件:

image.png

父組件:

image.png 效果:

image.png

然而,組件通信遠遠不止這些,上面的6個場景僅僅用到了如下3種方式:

一:props/$emit(父傳子,子傳父,子調父)

二:$bus(任意組件傳值,任意組件調方法)

三:ref/resf(父調子)

下面我將來講組件通信剩餘的5種方式。

四:$parent/ $children

來看看官方介紹,其實你知道了上面的三種方式,這種是不需要掌握的,官方也不推薦用。但是我們還是瞭解哈唄。

image.png 1.父傳子?

我們在子組件裏面打印一下$parent

image.png

打開控制枱發現這是組件實例,這説明什麼,這説明這可以訪問組件上的所有屬性和方法,我們可以看見我子組件的msg.

image.png

在A組件裏使用子組件,觸發這個事件,打印的就是A組件實列。

image.png

為了性能優化,建議同學們使用這種方法

image.png

2.子傳父? 我們打印父組件裏面打印一下$children

打開控制枱

image.png

這剛好和我們在父組件裏面使用子組件的順序一致。

image.png

我們打開其中一個子組件看一下

image.png

比如我們要使用第三個子組件AA裏面的屬性。

image.png

打開控制枱,驗證一下。

image.png

五:provide/reject

這對選項需要一起使用,以允許一個祖先組件向其所有子孫後代注入一個依賴,不論組件層次有多深,並在其上下游關係成立的時間裏始終生效。如果你熟悉 React,這與 React 的上下文特性很相似。

提示:provide 和 inject 綁定並不是可響應的。這是刻意為之的。然而,如果你傳入了一個可監聽的對象,那麼其對象的 property 還是可響應的

父組件index裏面有子組件A,在子組件裏面有孫組件c

在父組件index裏面:

image.png 在子組件A裏面:

image.png

在孫組件C裏面:

image.png

頁面效果:

image.png

六:Vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex各個模塊:\ state:用於數據的存儲,是store中的唯一數據源\ getters:如vue中的計算屬性一樣,基於state數據的二次包裝,常用於數據的篩選和多個數據的相關性計算\ mutations:類似函數,改變state數據的唯一途徑,且不能用於處理異步事件\ actions:類似於mutation,用於提交mutation來改變狀態,而不直接變更狀態,可以包含任意異步操作\ modules:類似於命名空間,用於項目中將各個模塊的狀態分開定義和操作,便於維護\

vueX其實這塊的內容比較多,一時半會兒講不完,也講不清楚,咱們下次單獨講。這次就先敷衍敷衍你們,諒解一下,哈哈哈哈。

在main.js裏面註冊vuex

image.png

在storex下的index裏面。

image.png

此時數據處於共享狀態,在任意一個頁面都可以直接訪問:

image.png

七:localStorage/sessionStorage

本地存儲也非常簡單,沒有什麼好講的,他常搭配vuex管理一些項目公共基礎數據,這塊我就簡單給大家分享幾種寫法吧,廢話少説,直接看圖。

存儲字符串:

寫法介紹:

image.png

打開本地存儲:

image.png

打開控制枱:

image.png

以上方法只能存儲字符串,不能存儲對象,要存儲對象,要用JSON.stringify()進行轉換成字符串。 取要用JSON.parse進行還原成對象。

存儲數組對象:

寫法介紹:

image.png

打開本地存儲:

image.png

打開控制枱:

image.png

八:$attrs/$listeners

$attrs:包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時,這裏會包含所有父作用域的綁定 (class 和 style 除外),並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。

父組件

image.png

子組件:

inheritAttrs:默認情況下父作用域的不被認作 props 的 attribute 綁定 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應用在子組件的根元素上。當撰寫包裹一個目標元素或另一個組件的組件時,這可能不會總是符合預期行為。通過設置 inheritAttrs 到 false,這些默認行為將會被去掉。而通過 (同樣是 2.4 新增的) 實例 property $attrs 可以讓這些 attribute 生效,且可以通過 v-bind 顯性的綁定到非根元素上。

注意:這個選項不影響 class 和 style 綁定。

image.png

孫組件:

image.png

頁面效果:

image.png**

$listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

父組件:

image.png 子組件:

image.png

孫組件:

image.png 打開控制枱查看結果:

image.png

總結:

一:props/$emit(父傳子,子傳父,子調父)
二:$bus(任意組件傳值,任意組件調方法)
三:ref/resf(父調子)
四:$parent/ $children(父子組件)
五:provide/reject(跨級組件)
六:Vuex(任意組件)
七:localStorage/sessionStorage(任意組件)
八:$attrs/$listeners(跨級組件)

好了,大家多理解理解,本期文章到此結束。最好自己動手敲一敲效果更好哦!

筆者往期文章:

第二期:手把手教你利用XSS攻擊體驗一次黑客

第一期:我在工作中是如何使用git的?

本文因能力有限,有的地方寫得可能比較粗糙,如果有疑問可以添加我的微信一起交流學習哦,請備註:掘金