父子

A 組件與 B 組件之間的通信： （父子組件）
如上圖所示，A、B、C三個組件依次嵌套，按照 Vue 的開發習慣，父子組件通信可以通過以下方式實現：

A to B 通過props的方式向子組件傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現
通過設置全局Vuex共享狀態，通過 computed 計算屬性和 commit mutation的方式實現數據的獲取和更新，以達到父子組件通信的目的。
Vue Event Bus，使用Vue的實例，實現事件的監聽和發布，實現組件之間的傳遞。
往往數據在不需要全局的情況而僅僅是父子組件通信時，使用第一種方式即可滿足。

跨多級

A 組件與 C 組件之間的通信： （跨多級的組件嵌套關系）
如上圖，A 組件與 C 組件之間屬于跨多級的組件嵌套關系，以往兩者之間如需實現通信，往往通過以下方式實現：

借助 B 組件的中轉，從上到下props依次傳遞，從下至上，$emit事件的傳遞，達到跨級組件通信的效果
借助Vuex的全局狀態共享
Vue Event Bus，使用Vue的實例，實現事件的監聽和發布，實現組件之間的傳遞。

問題

顯然，第一種通過props和$emit的方式，使得組件之間的業務邏輯臃腫不堪，B組件在其中僅僅充當的是一個中轉站的作用。如使用第二種 Vuex的方式，某些情況下似乎又有點大材小用的意味，（僅僅是想實現組件之間的一個數據傳遞，并非數據共享的概念）。第三種情況的使用在實際的項目操作中發現，如不能實現很好的事件監聽與發布的管理，往往容易導致數據流的混亂，在多人協作的項目中，不利于項目的維護。

解決方案

在ABC父子孫三個組件中，子組件及B中代碼類似下面這樣：

<template><div class="child-1"><p>in child1:</p><p>props: {{pChild1}}</p><p>$attrs: {{$attrs}}</p><hr><!-- C組件中能直接觸發test的原因在于 B組件調用C組件時 使用 v-on 綁定了$listeners 屬性 --><!-- 通過v-bind 綁定$attrs屬性，C組件可以直接獲取到A組件中傳遞下來的props（除了B組件中props聲明的） --><child2 v-bind="$attrs" v-on="$listeners"></child2></div> </template> <script>import Child2 from './Child2.vue';export default {props: ['pChild1'],data () {return {};},inheritAttrs: false,components: { Child2 },mounted () {this.$emit('test1');}}; </script>

v-bind屬性$attr,保證C組件能夠獲取到A組件傳遞下來的props(除props屬性中聲明的屬性以外)；

而v-bind屬性$listeners，則保證C組件能直接調用A組件的方法。

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的【前端框架-Vue-基础】$attr及$listeners实现跨多级组件的通信的全部內容，希望文章能夠幫你解決所遇到的問題。

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