前言

最近在刷面試題時，看見這個問題便做了個總結(jié)，歡迎各位補(bǔ)充！！！

為了更好的閱讀性，請使用掘金訪問

1.props & $emit——適用于父子組件通信

父組件通過prop向子組件傳遞數(shù)據(jù)，子組件通過$emit觸發(fā)事件給父組件傳遞數(shù)據(jù)。Vue基礎(chǔ)，在此就不做過多的贅述。

這里提一下將一個對象的所有 property 都作為 prop 傳入

// 父組件

2.ref——適用于父子組件通信

當(dāng)ref作用在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，如果用在組件上，引用就指向組件實(shí)例。進(jìn)而我們能夠獲取到該組件的data，能夠調(diào)取該組件的方法。

注意

當(dāng)指定的元素出現(xiàn)在v-for循環(huán)里時，此時返回的是一個數(shù)組，即使只循環(huán)一次，返回的也是一個數(shù)組。ref指向普通元素時，也是如此

<div v-for="item in ids" :key="item"><Child ref="child"></Child> </div>ids: [1, 2, 3]this.$refs.child; // [VueComponent, VueComponent, VueComponent]

3.$children——適用于父子組件通信

返回當(dāng)前實(shí)例的直接子組件數(shù)組，

1.$children只返回直接子組件

2.$children 并不保證順序，也不是響應(yīng)式的。

用法和ref相似

<Child><other></other> </Child>this.$children; // [VueComponent] 不包含other

4.$parent——適用于父子組件通信

返回當(dāng)前實(shí)例的父實(shí)例，如果有的話

// 情形一 // 父組件<Child></Child>// 子組件 this.$parent; // 返回的是父組件的實(shí)例// 情形二 // 父組件 <Other><Child></Child> </Other>// 子組件 this.$parent; // 此時返回的是Other組件的實(shí)例

5.$attrs——適用于隔代組件通信

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

// 父組件 <Child:abc="true" :flag="123"></Child> // 子組件 props: ["flag"] console.log(this.$attrs); // {abc: true}// 傳入內(nèi)部組件 // 最外層組件 <Other :ids="ids"> </Other> ids: [1, 2, 3] // other組件 <Child v-bind="$attrs"></Child> // props: ["ids"], 一旦在props中聲明該屬性，$attrs將拿不到該屬性 this.$attrs; // {ids: [1,2,3]} // child組件 this.$attrs // {ids: [1,2,3]}

6.$root

訪問當(dāng)前組件樹的根 Vue 實(shí)例。如果當(dāng)前實(shí)例沒有父實(shí)例，此實(shí)例將會是其自己。

// Vue 根實(shí)例 new Vue({data: {foo: 1},computed: {bar: function () { /* ... */ }},methods: {baz: function () { /* ... */ }} })// 獲取根組件的數(shù)據(jù) this.$root.foo// 寫入根組件的數(shù)據(jù) this.$root.foo = 2// 訪問根組件的計算屬性 this.$root.bar// 調(diào)用根組件的方法 this.$root.baz()

7.$listeners——適用于隔代組件通信

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

// 傳入內(nèi)部組件

8.中央事件總線——適用于兄弟、父子、隔代組件

一個空的 Vue 實(shí)例作為中央事件總線（事件中心），然后通過bus.$emit觸發(fā)事件，bus.$on監(jiān)聽觸發(fā)的事件。從而實(shí)現(xiàn)任何組件間的通信，包括父子、隔代、兄弟組件。

// bus.js

9.provide & inject——適用于隔代組件通信

provide 和 inject 主要在開發(fā)高階插件/組件庫時使用。并不推薦用于普通應(yīng)用程序代碼中。

· 這對選項(xiàng)需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在其上下游關(guān)系成立的時間里始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。provide選項(xiàng)應(yīng)該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的 property。在該對象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持Symbol和Reflect.ownKeys的環(huán)境下可工作。inject選項(xiàng)應(yīng)該是：

• 一個字符串?dāng)?shù)組，或
• 一個對象，對象的 key 是本地的綁定名，value 是：
• 在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，或
• 一個對象，該對象的：
• from property 是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)
• default property 是降級情況下使用的 value

提示：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的 property 還是可響應(yīng)的。

// 父組件

10.sync修飾符——適用于父子組件通信

Vue提供的一種縮寫

// 父組件

11. native修飾符——適用于父子組件

在一個組件的根元素上直接監(jiān)聽一個原生事件

// 父組件

12.slot

通過插槽內(nèi)容訪問子組件中才的內(nèi)部數(shù)據(jù)

// 父組件 注意 v-slot 只能添加在 <template> 上 (只有當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。)，這一點(diǎn)和已經(jīng)廢棄的 slot attribute 不同。

13.observable——適用于兄弟、父子、隔代組件

在小型項(xiàng)目中用來代替Vuex

// store.js <

14.Vuex

總結(jié)

以上是生活随笔為你收集整理的uniapp 子组件 props拿不到数据_Vue组件间的几种通信方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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