有個第三方組件Third-Component, 你想包裝再利用，可以如下寫：
<Third-Component v-bind="$attrs" v-on="$listeners">
<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
<slot/>
</Third-Component>
例子
比如你常用UI組件庫中的彈框組件Modal，每次調用時需將其width設為1000：
<Modal width="1000">
// ...
</Modal
你不想每次調用都寫width="1000" 强衡，因為可能以后需改為width=800筋帖，你希望width="1000" 只出現一次哩都。
你可以創(chuàng)建一個新組件my-modal瞎颗，組件內容如下:
<template>
<Modal
v-bind="$attrs"
v-on="$listeners"
:width="1000">
<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
<slot/>
</Modal>
</template>
<script>
export default {
name: "myModal",
}
</script>
以后你只需調用<my-modal>即可。在My-Modal中可以用Modal的全部props何恶，事件監(jiān)聽和slot孽锥。
分析
v-bind="$attrs"
傳遞所有的prop
v-on="$listeners"
傳遞所有的監(jiān)聽
<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"/>
</template>
遍歷并寫入所有的slot插槽
