前言

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

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

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

父組件通過prop向子組件傳遞數據，子組件通過$emit觸發事件給父組件傳遞數據。Vue基礎，在此就不做過多的贅述。

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

// 父組件

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

當ref作用在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，如果用在組件上，引用就指向組件實例。進而我們能夠獲取到該組件的data，能夠調取該組件的方法。

注意

當指定的元素出現在v-for循環里時，此時返回的是一個數組，即使只循環一次，返回的也是一個數組。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——適用于父子組件通信

返回當前實例的直接子組件數組，

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

2.$children 并不保證順序，也不是響應式的。

用法和ref相似

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

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

返回當前實例的父實例，如果有的話

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

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

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

// 父組件 <Child:abc="true" :flag="123"></Child> // 子組件 props: ["flag"] console.log(this.$attrs); // {abc: true}// 傳入內部組件 // 最外層組件 <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

訪問當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。

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

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

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

// 傳入內部組件

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

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

// bus.js

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

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

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

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

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

// 父組件

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

Vue提供的一種縮寫

// 父組件

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

在一個組件的根元素上直接監聽一個原生事件

// 父組件

12.slot

通過插槽內容訪問子組件中才的內部數據

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

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

在小型項目中用來代替Vuex

// store.js <

14.Vuex

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。