當(dāng)我們要復(fù)寫各類 UI 組件的時(shí)候，為了保證UI組件的參數(shù)與插槽都能使用，且不用重復(fù)定義，我們可以通過
屬性透?jìng)?/code>與插槽透?jìng)?/code>來實(shí)現(xiàn)
屬性透?jìng)?$attrs
$attrs 一個(gè)包含了組件所有透?jìng)?attribute 的對(duì)象（不包含已定義的 props）。
透?jìng)?Attribute 是一些由父組件傳入的 attribute 和 事件處理器，且沒有在此子組件中聲明為一個(gè) prop 或要拋出的事件。
默認(rèn)情況下，若是單一根節(jié)點(diǎn)組件，$attrs 中的所有 property 都是直接自動(dòng)繼承自組件的根元素。而多根節(jié)點(diǎn)組件則不會(huì)如此，同時(shí)你也可以通過配置 inheritAttrs 選項(xiàng)來顯式地關(guān)閉該行為。
實(shí)現(xiàn)屬性透?jìng)?/h4>
// 自定義的 MyButton
<el-button v-bind="$attrs"></el-button>
// 其他組件調(diào)用
<MyButton type="primary">按鈕<MyButton>
/**
* type="primary" 將會(huì)通過 v-bind="$attrs" 透?jìng)鹘o el-button 組件
*/
插槽透?jìng)?$slots
// 自定義的 MyButton
<el-button v-bind="$attrs"></el-button>
// 其他組件調(diào)用
<MyButton type="primary">按鈕<MyButton>
/**
* type="primary" 將會(huì)通過 v-bind="$attrs" 透?jìng)鹘o el-button 組件
*/
$slots 一個(gè)表示父組件所傳入插槽的對(duì)象。
通常用于手寫渲染函數(shù)，但也可用于檢測(cè)是否存在插槽。
每一個(gè)插槽都在 this.$slots 上暴露為一個(gè)函數(shù)，返回一個(gè) vnode 數(shù)組，同時(shí) key 名對(duì)應(yīng)著插槽名。默認(rèn)插槽暴露為 this.$slots.default。
如果插槽是一個(gè)作用域插槽，傳遞給該插槽函數(shù)的參數(shù)可以作為插槽的 prop 提供給插槽。
實(shí)現(xiàn)插槽透?jìng)?/h3>
// 自定義組件 MyButton
<el-button v-bind="$attrs">
<!-- 通過便利實(shí)現(xiàn)插槽透?jìng)?-->
<template v-for="(item, key, index) in $slots" :key="index" v-slot:[key]>
<slot :name="key"></slot>
</template>
</el-button>
// 其他組件調(diào)用
<MyButton type="primary">
<el-icon><Back /></el-icon>
<MyButton>
// 自定義組件 MyButton
<el-button v-bind="$attrs">
<!-- 通過便利實(shí)現(xiàn)插槽透?jìng)?-->
<template v-for="(item, key, index) in $slots" :key="index" v-slot:[key]>
<slot :name="key"></slot>
</template>
</el-button>
// 其他組件調(diào)用
<MyButton type="primary">
<el-icon><Back /></el-icon>
<MyButton>
