Ex ： A 包含 B B包含C
简单来说：$attrs 与 $listeners 是两个「对象」，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。
A组件：
<template>
<div>
<button @click="add">点击增加年龄</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>
效果图：
点击【子组件的方法】
简单来说：$attrs 与 $listeners 是两个「对象」，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。
