1. 場景一
當(dāng)我們有多層組件嵌套的時候 可以通過listeners 傳遞參數(shù)和事件，比如：
父組件A
<template>
<B :name="name" @say="say" />
</template>
<script>
export default {
data(){
return {
name:'Tom',
}
},
methods:{
say(){
console.log(`hello,${this.name}!`)
}
}
}
</script>
子組件要想真正實現(xiàn)多組件間相互傳遞 一般要在組件上加上inheritAttrs: false。
$attrs接收沒有被props聲明的數(shù)據(jù)
子組件B
<template>
<C v-bind="$attrs" v-on="listeners" />
</template>
<script>
export default {
inheritAttrs： false
}
</script>
孫組件C
<template>
<div>{{name}}</div>
<button @click="handleSay">打招呼</button>
</template>
<script>
export default {
props:{
name:String
},
methods:{
handleSay(){
this.$emit('say')
}
}
}
</script>
2. 場景二
很多時候我們需要對一些UI框架做二次封裝，但是UI框架自帶的各種屬性配置又不能丟，需要在二次封裝的時候源UI框架的屬性依舊可以用，且不用每一個都去聲明，可以用listeners 來實現(xiàn)，比如：
A組件
<template>
<myTable :header="tableHeader" :data="tableData" />
</template>
<script>
export default {
data(){
return {
tableHeader:[
{name:'企業(yè)名稱',field:'name'},
{name:'企業(yè)規(guī)模',field:'size'},
],
tableData:[
{name:'xxx名稱',size:'100-999人'},
{name:'yyy名稱',size:'10-39人'},
],
}
}
}
</script>
myTable 組件
這里只聲明了tableHeader和tableData 參數(shù)， 如果使用組件的時候 用戶想要一個帶有縱向邊框的表格，原UI框架是支持 傳參數(shù) border=‘true’ 可滿足需求，但是在我們二次封裝后，并沒有聲明這個border 屬性，怎么辦？ 繼續(xù)添加聲明props？ 如果又有其他需求 想要size 屬性呢？ 再添加props嗎？ no no no ，這一點不好。怎么做才能讓我們二次封裝的組件能使用原來的屬性配置又不用提前寫一推props呢？ 這就會用到$attrs啦，這也太好了吧。。。
<template>
<el-table v-bind="$attrs" v-on="listeners" >
<template v-for="item in tableHeader">
<el-table-column>... </el-table-column>
</template>
</el-table>
</template>
<script>
export default {
props:{
tableHeader:Array,
tableData:Array,
}
}
</script>
