知識整理 · vue.js

[TOC] ### v-bind="$attrs" v-on="$listeners"介紹： ~~~ 在通信中使用，父組件向子組件傳遞參數原本的需要將傳遞的參數在props中注冊類型，多層嵌套的話就顯得很冗余，于是使用v-bind="$attrs" v-on="$listeners"來做中轉，可以實現多層組件嵌套傳參。為什么不使用vuex ---殺雞焉用宰牛刀為什么不使用事件總線 ---多人協作開發情況下，要事件監聽處理不好會出現問題 ~~~ ## 前言多級組件嵌套需要傳遞數據時，通常使用的方法是通過vuex。如果僅僅是傳遞數據，而不做中間處理，使用 vuex 處理，未免有點殺雞用牛刀。Vue 2.4 版本提供了另一種方法，使用 v-bind=”$attrs”, 將父組件中不被認為 props特性綁定的屬性傳入子組件中，通常配合 interitAttrs 選項一起使用。之所以要提到這兩個屬性，是因為兩者的出現使得組件之間跨組件的通信在不依賴 vuex 和事件總線的情況下變得簡潔，業務清晰。 **首先分析以下應用場景：** ![](https://files.jb51.net/file_images/article/201801/201818103314216.png?201808103342) ## 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的方式，某些情況下似乎又有點大材小用的意味，（僅僅是想實現組件之間的一個數據傳遞，并非數據共享的概念）。第三種情況的使用在實際的項目操作中發現，如不能實現很好的事件監聽與發布的管理，往往容易導致數據流的混亂，在多人協作的項目中，不利于項目的維護。 $attrs以及$listeners的出現解決的就是第一種情況的問題，B 組件在其中傳遞props以及事件的過程中，不必在寫多余的代碼，僅僅是將$attrs以及$listeners向上或者向下傳遞即可。 ## 示例代碼如下所示： ### A組件（App.vue） [?](https://www.jb51.net/article/132371.htm#) 123456789101112131415161718192021222324252627<template> <div id="app"> <child1 :p-child1="child1" :p-child2="child2" v-on:test1="onTest1" //此處監聽了兩個事件，可以在B組件或者C組件中直接觸發 v-on:test2="onTest2"> </child1> </div></template><script> import Child1 from './Child1.vue'; export default { data () { return {}; }, components: { Child1 }, methods: { onTest1 () { console.log('test1 running...'); }, onTest2 () { console.log('test2 running'); } } };</script> ### B組件（Child1.vue） [?](https://www.jb51.net/article/132371.htm#) 12345678910111213141516171819202122232425<template> <div class="child-1"> <p>in child1:</p> <p>props: {{pChild1}}</p> <p>$attrs: {{$attrs}}</p> <hr>   <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> 結果： in child1: props: v\_child1 $attrs: { “p-child2”: “v\_child2”} ### C 組件 (Child2.vue) [?](https://www.jb51.net/article/132371.htm#) 1234567891011121314151617181920<template> <div class="child-2"> <p>in child2:</p> <p>props: {{pChild2}}</p> <p>$attrs: {{$attrs}}</p> <hr> </div></template><script> export default { props: ['pChild2'], data () { return {}; }, inheritAttrs: false, mounted () { this.$emit('test2'); } };</script> 結果： in child2: props: v\_child2 $attrs: {} ## 知識點總結 **$attrs** ?包含了父作用域中不被認為 (且不預期為) props 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 props 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind=”$attrs” 傳入內部組件——在創建更高層次的組件時非常有用。 **$listeners ** 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on=”$listeners” 傳入內部組件——在創建更高層次的組件時非常有用。 **inheritAttrs** 默認情況下父作用域的不被認作 props 的特性綁定 (attribute bindings) 將會“回退”且作為普通的 HTML 特性應用在子組件的根元素上。當撰寫包裹一個目標元素或另一個組件的組件時，這可能不會總是符合預期行為。通過設置 inheritAttrs 到 false，這些默認行為將會被去掉。而通過 (同樣是 2.4 新增的) 實例屬性 $attrs 可以讓這些特性生效，且可以通過 v-bind 顯性的綁定到非根元素上。上述特性的使用完全可以降低在不使用Vuex以及事件總線的情況下，組件跨級props以及事件傳遞的復雜度。