• 2018-06-15創建

組價通信

vue中一個比較令人煩惱的事情是屬性只能從父組件傳遞給子組件。這也就意味著當你想向嵌套層級比較深組件數據傳遞，只能由父組件傳遞給子組件，子組件再傳遞給孫子組件...

多級組件嵌套需要傳遞數據時，通常使用的方法是通過vuex。如果僅僅是傳遞數據，而不做中間處理，使用 vuex 處理，未免有點殺雞用牛刀。Vue 2.4 版本提供了另一種方法，使用 v-bind=”$attrs”, 將父組件中不被認為 props特性綁定的屬性傳入子組件中，通常配合 interitAttrs 選項一起使用。之所以要提到這兩個屬性，是因為兩者的出現使得組件之間跨組件的通信在不依賴 vuex 和事件總線的情況下變得簡潔，業務清晰。

vm.$attrs

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

示例

<template>
  <div class="home">
    <mytest  :title="title" :massgae="massgae"></mytest>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      title:'title1111',
      massgae:'message111'
    }
  },
  components:{
    'mytest':{
      template:`<div>這是個h1標題{{title}}</div>`,
      props:['title'],
      data(){
        return{
          mag:'111'
        }
      },
      created:function(){
        console.log(this.$attrs)//注意這里
      }
    }
  }
}
</script>

上邊的代碼，我們在組件里只是用了title這個屬性，massgae屬性我么是沒有用的，那么下瀏覽器渲染出來是什么樣呢？如下圖：

image.png

我們看到：組件內未被注冊的屬性將作為普通html元素屬性被渲染，如果想讓屬性能夠向下傳遞，即使prop組件沒有被使用，你也需要在組件上注冊。這樣做會使組件預期功能變得模糊不清，同時也難以維護組件的DRY。在Vue2.4.0,可以在組件定義中添加inheritAttrs：false，組件將不會把未被注冊的props呈現為普通的HTML屬性。但是在組件里我們可以通過其$attrs可以獲取到沒有使用的注冊屬性，如果需要，我們在這也可以往下繼續傳遞。

components:{
    'mytest':{
      template:`<div>這是個h1標題{{title}}</div>`,
      props:['title'],
      inheritAttrs: false,
      data(){
        return{
          mag:'111'
        }
      },
      created:function(){
        console.log(this.$attrs)//注意這里
      }
    }

image.png

繼續

$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以及事件傳遞的復雜度。

完整示例

image.png

$attrs以及$listeners的出現解決的就是第一種情況的問題，B 組件在其中傳遞props以及事件的過程中，不必在寫多余的代碼，僅僅是將$attrs以及$listeners向上或者向下傳遞即可。

A組件（App.vue）

<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）

<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>

結果：

in child1:

props: v_child1

$attrs: { “p-child2”: “v_child2”}

C 組件 (Child2.vue)

<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: {}

其他

<template>
 <component
    :is="type"
    v-bind="vbinds"
    @getValue="(v) => getValue(v, i)"
    />
</template>
<script>
 export default {
 
 data () {
 return {
   vbinds: {
      ismultiple: '',
      region: '',
      logic: ''
   }
 };
 },

 };
</script>