Ex ： A 包含 B? B包含C
簡單來說：$attrs?與?$listeners?是兩個「對象」叫潦，$attrs?里存放的是父組件中綁定的非 Props 屬性，$listeners里存放的是父組件中綁定的非原生事件吕喘。
A組件：
<template>
??<div>
????<button?@click="add">點(diǎn)擊增加年齡</button>
????<child?:title="title"
???????????:name='name'
???????????:hobby='hobby'
???????????:age='age'
???????????@childclik='childclik'
???????????/>
??</div>
</template>
<script>
??import?child?from?'./child'
??export?default?{
????components:?{?child?},
????data?()?{
??????return?{
????????title:?'自我介紹',
????????name:?'Tom',
????????hobby:?'like?eat',
????????age:?4,
??????}
????},
????methods:?{
??????add?()?{
????????this.age++
??????},
??????childclik(val){
??????????this.name=val
??????}
????},
??}
</script>
B組件：
<template>
??<section>
????<div>我是子組件：{{$attrs}}</div>
????<childChild?v-bind="$attrs"?/>
????<el-button?@click="$listeners.childclik('xxxxxxxx')">子組件的方法</el-button>
??</section>
</template>
<script>
??import?childChild?from?'./childlittle'
??export?default?{
????props:?[],
????components:?{
??????childChild
????}
??}
</script>
C組件：
<template>
????<div?style="width:100%;marign-top:50px;padding:30px;background:gray">
?????????<div>我是子組件的組件：
???????????</div>
?????????<div>主題：{{$attrs.title}}</div>
?????????<div>姓名：{{$attrs.name}}</div>
?????????<div>愛好：{{$attrs.hobby}}</div>
?????????<div>年齡：{{$attrs.age}}</div>
????</div>
</template>
效果圖：
點(diǎn)擊【子組件的方法】
簡單來說：$attrs?與?$listeners?是兩個「對象」，$attrs?里存放的是父組件中綁定的非 Props 屬性旁涤，$listeners里存放的是父組件中綁定的非原生事件碉咆。
