組件多級嵌套，相互傳遞如何實(shí)現(xiàn)的
A：父組件
B：子組件
C：孫組件
在開發(fā)過程中，有時(shí)候想把某些數(shù)據(jù)從A組件傳遞給C組件，用Props的話么，可以先將數(shù)據(jù)從A--->B---->C,但是看起來不是很帥氣。
那么listeners就是來解決這個(gè)問題的
1）$attr
繼承所有的父組件屬性（除了prop傳遞的屬性、class和style）

//父組件A
<template>
  <b :name='name' :age='age'/>
</template>
import B from './B.vue'
export default {
    name: 'parentA',
     data() {
        return {
          name:"小紅",
          age:"18"
        }
     },
     components:{B },
   }
//子組件B
<template>
  <div>
    <div>{{name}}</div>
    <div>{{$attrs.age}}</div>
    <!-- 通過v-bind 綁定$attrs屬性，C組件可以直接獲取到A組件中傳遞下來的props（除了B組件中props聲明的） --> 
     <c v-bind="$attrs" v-on="$listeners"/>
 </div>
</template>
import C from './C.vue'
export default {
    name: 'parentB',
    props:["name"]
     data() {
        return { }
     },
     components:{C},
   }
//孫組件C
<template>
      <div>age:{{$attrs.age}}</div>
</template>
<script>
export default {
 name:'C'
}
</script>

2，$listener的使用

$listeners 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器，它可以通過 v-on=”$listeners” 傳入內(nèi)部組件。

//父組件A
<template>
  <b :name='name' :age='age' v-on:testB="onB" v-on:testC="onC" />
</template>
import B from './B.vue'
export default {
    name: 'parentA',
     data() {
        return {
          name:"小紅",
          age:"18"
        }
     },
     components:{B },
methods: {
         //b傳回來的數(shù)據(jù)
        onB(msg) {
            console.log('我是B：',msg);
        },

        // c 傳回來的數(shù)據(jù)
        onC(msg) {
            console.log('我是C：',msg);
        }
    }
   }
//子組件B
<template>
  <div>
    <div>{{name}}</div>
    <div>{{$attrs.age}}</div>
    <!-- 通過v-bind 綁定$attrs屬性，C組件可以直接獲取到A組件中傳遞下來的props（除了B組件中props聲明的） --> 
 <!-- C組件中能直接觸發(fā)test的原因在于 B組件調(diào)用C組件時(shí) 使用 v-on 綁定了$listeners 屬性 -->
     <c v-bind="$attrs" v-on="$listeners"/>
 </div>
</template>
import C from './C.vue'
export default {
    name: 'parentB',
    props:["name"]
     data() {
        return { }
     },
     components:{C},
mounted() {
        this.$emit('testB','BBBB');
    }
   }
//孫組件C
<template>
      <div>age:{{$attrs.age}}</div>
</template>
<script>
export default {
 name:'C'
mounted() {
        this.$emit('testC','CCCC');
    }
}
</script>

通俗的講$ attrs+$ props = 在使用組件時(shí)定義的所有屬性，不包括事件

那么在當(dāng)前組件中使用v-bind="$attrs"，v-bind="$props"，v-on="$listeners"也就是把之前父組件那里給它的屬性再全部傳到它的子組件。