1. 場(chǎng)景一
當(dāng)我們有多層組件嵌套的時(shí)候 可以通過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>
子組件要想真正實(shí)現(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. 場(chǎng)景二
很多時(shí)候我們需要對(duì)一些UI框架做二次封裝兑凿，但是UI框架自帶的各種屬性配置又不能丟撵术，需要在二次封裝的時(shí)候源UI框架的屬性依舊可以用猖腕，且不用每一個(gè)都去聲明娜膘，可以用listeners 來實(shí)現(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ù)， 如果使用組件的時(shí)候 用戶想要一個(gè)帶有縱向邊框的表格末患，原UI框架是支持 傳參數(shù) border=‘true’ 可滿足需求爷抓，但是在我們二次封裝后，并沒有聲明這個(gè)border 屬性阻塑，怎么辦蓝撇？ 繼續(xù)添加聲明props？ 如果又有其他需求 想要size 屬性呢陈莽？ 再添加props嗎渤昌？ no no no ，這一點(diǎn)不好走搁。怎么做才能讓我們二次封裝的組件能使用原來的屬性配置又不用提前寫一推props呢独柑？ 這就會(huì)用到$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>
