有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的

vue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？ 首先我們需要知道在vue中組件之間存在什么樣的關(guān)系, 才更容易理解他們的通信方式, 就好像過年回家，坐著一屋子的陌生人，相互之間怎么稱呼，這時(shí)就需要先知道自己和他們之間是什么樣的關(guān)系。 vue組件中關(guān)系說明:

如上圖所示, A與B、A與C、B與D、C與E組件之間是父子關(guān)系； B與C之間是兄弟關(guān)系；A與D、A與E之間是隔代關(guān)系； D與E是堂兄關(guān)系(非直系親屬) 針對以上關(guān)系我們歸類為：

• 父子組件之間通信
• 非父子組件之間通信(兄弟組件、隔代關(guān)系組件等)

一、props / $emit

父組件通過props的方式向子組件傳遞數(shù)據(jù)，而通過$emit 子組件可以向父組件通信。

1. 父組件向子組件傳值

下面通過一個(gè)例子說明父組件如何向子組件傳遞數(shù)據(jù)：在子組件article.vue中如何獲取父組件section.vue中的數(shù)據(jù)articles:['紅樓夢', '西游記','三國演義']

// section父組件復(fù)制代碼// 子組件 article.vue {{item}} 復(fù)制代碼

總結(jié): prop 只可以從上一級組件傳遞到下一級組件(父子組件)，即所謂的單向數(shù)據(jù)流。而且 prop 只讀，不可被修改，所有修改都會失效并警告。

2. 子組件向父組件傳值

對于$emit 我自己的理解是這樣的: $emit綁定一個(gè)自定義事件, 當(dāng)這個(gè)語句被執(zhí)行時(shí), 就會將參數(shù)arg傳遞給父組件,父組件通過v-on監(jiān)聽并接收參數(shù)。 通過一個(gè)例子，說明子組件如何向父組件傳遞數(shù)據(jù)。 在上個(gè)例子的基礎(chǔ)上, 點(diǎn)擊頁面渲染出來的ariticle的item, 父組件中顯示在數(shù)組中的下標(biāo)

// 父組件中

{{currentIndex}}

復(fù)制代碼 {{item}} 復(fù)制代碼// 父組件中 {{msg}} 點(diǎn)擊改變子組件值 復(fù)制代碼// 子組件中 {{messageA}}

獲取父組件的值為: {{parentVal}}

復(fù)制代碼

要注意邊界情況，如在#app上拿$parent得到的是new Vue()的實(shí)例，在這實(shí)例上再拿$parent得到的是undefined，而在最底層的子組件拿$children是個(gè)空數(shù)組。也要注意得到$parent和$children的值不一樣，$children 的值是數(shù)組，而$parent是個(gè)對象

總結(jié)

上面兩種方式用于父子組件之間的通信， 而使用props進(jìn)行父子組件通信更加普遍; 二者皆不能用于非父子組件之間的通信。

三、provide/ inject

概念:

provide/ inject 是vue2.2.0新增的api, 簡單來說就是父組件中通過provide來提供變量, 然后再子組件中通過inject來注入變量。

注意: 這里不論子組件嵌套有多深, 只要調(diào)用了inject 那么就可以注入provide中的數(shù)據(jù)，而不局限于只能從當(dāng)前父組件的props屬性中回去數(shù)據(jù)

舉例驗(yàn)證

接下來就用一個(gè)例子來驗(yàn)證上面的描述: 假設(shè)有三個(gè)組件: A.vue、B.vue、C.vue 其中 C是B的子組件，B是A的子組件

// A.vue 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的layer中嵌套的页面如何操作父页面_vue中8种组件通信方式，值得收藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。