組件多級嵌套蝌箍，相互傳遞如何實(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"也就是把之前父組件那里給它的屬性再全部傳到它的子組件港令。
