在組件多級(jí)嵌套的情況下逛腿，相互間的傳值是這樣的呢 稀并？

A 根組件
B 子組件
C 孫組件
...

在很多開(kāi)發(fā)情況下，我們只是想把A組件的信息傳遞給C組件单默，如果使用props 綁定來(lái)進(jìn)行信息的傳遞稻轨，雖然能夠?qū)崿F(xiàn)，但是代碼并不美觀雕凹。

在vue2.4中殴俱，為了解決該需求，引入了 $attrs 和 $listeners 枚抵， 新增了inheritAttrs 選項(xiàng)线欲。

1. $attrs的使用

繼承所有的父組件屬性（除了prop傳遞的屬性、class 和 style ）

注：使用 $attrs 時(shí)汽摹，所接收的值是不包含props里面值的李丰。如下例，name與sex都用props接受逼泣，$attrs 接收的值將為 空趴泌，props 只接收name時(shí)舟舒，$attrs 只會(huì)有sex

// 父組件A 代碼如下
<template>
   <div>
     <child-b
      :name="name"
      :sex="sex"
     >
     </child-b>
   </div>
</template>
<script>
   import childB from "./ChildB.vue";
   export default {
    name: 'parA',
     data() {
        return {
          name:"zhudying",
          sex:"男"
        }
     },
     components:{childB },
   }
</script>

// 子組件child-b 代碼如下
<template>
   <div>
    <div>{{name}}</div>
    <div>{{$attrs.sex}}</div>
    <!-- 通過(guò)v-bind 綁定$attrs屬性，C組件可以直接獲取到A組件中傳遞下來(lái)的props（除了B組件中props聲明的） --> 
     <child-c v-bind="$attrs" v-on="$listeners">  </child-c>
   </div>
</template>
<script>
   import childC from "./ChildC.vue";
   export default {
     name: 'childB',
     props:["name"]
     data() {
        return { }
     },
     components:{childC },
   }
</script>

// 孫組件child-c 代碼如下
<template>
   <div>
      <p>sex:{{$attrs.sex}}</p>
   </div>
</template>
<script>
export default {
 name:'childC'
}
</script>

2. $listeners的使用

包含了父作用域中的 v-on 或 @ 事件監(jiān)聽(tīng)器嗜憔。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件

注：使用 $listeners時(shí)秃励，不包含不含 .native 修飾器的。

// 父組件 A

<template>
    <div>
        <Child-b v-on:test1="onTest1" v-on:test2="onTest2"></Child-b>
    </div>
</template>
<script>
import Childb from './child-b';
export default {
    data() {
        return { };
    },
    components: { Childb },
    methods: {
         // child-b 傳回來(lái)的數(shù)據(jù)
        onTest1(msg) {
            console.log('test1',msg);
        },

        // child-c 傳回來(lái)的數(shù)據(jù)
        onTest2(msg) {
            console.log('test2',msg);
        }
    }
};
</script>

// 子組件b
<template>
    <div class="child-b">
        <!-- Child-c組件中能直接觸發(fā)test的原因在于 B組件調(diào)用C組件時(shí) 使用 v-on 綁定了$listeners 屬性 -->
        <Child-c  v-on="$listeners"></Child-c>
    </div>
</template>
<script>
import Childc from './child-c';
export default {
    data() {
        return {};
    },
    components: { Childc },
    mounted() {
        this.$emit('test1','嘻嘻');
    }
};
</script>

//在孫子組件c
<template>
    <div class="child-c"></div>
</template>
<script>
export default {
    data() {
        return {};
    },
    mounted() {
        this.$emit('test2','哈哈');
    }
};
</script>