在Vue中,有三種類型的插槽可用于組件間的內(nèi)容分發(fā):
1. 匿名插槽(Default Slot):匿名插槽是最常見的一種插槽類型。當(dāng)組件沒有具名插槽時(shí),所有沒有被包裹在具名插槽中的內(nèi)容都會(huì)被放置在匿名插槽中。在組件模板中使用 `` 標(biāo)簽來表示匿名插槽。
示例:
<template>
<div>
<slot></slot>
</div>
</template>
2. 具名插槽(Named Slot):具名插槽允許你在組件中定義多個(gè)插槽,并為它們命名。這樣,父組件可以根據(jù)插槽的名稱將內(nèi)容分發(fā)到相應(yīng)的插槽中。在組件模板中使用 `` 標(biāo)簽的 `name` 屬性來表示具名插槽。
示例:
<template>
<div>
<slot name="header"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>
</div>
</template>
父組件使用具名插槽分發(fā)內(nèi)容:
<template>
<custom-component>
<template v-slot:header>
<!-- 插入頭部內(nèi)容 -->
</template>
<template v-slot:content>
<!-- 插入內(nèi)容 -->
</template>
<template v-slot:footer>
<!-- 插入底部內(nèi)容 -->
</template>
</custom-component>
</template>
3. 作用域插槽(Scoped Slot):作用域插槽允許子組件將數(shù)據(jù)傳遞給父組件,以便父組件可以在插槽中使用。通過在子組件中使用 `` 標(biāo)簽的屬性和具名插槽結(jié)合,可以將子組件的數(shù)據(jù)傳遞給父組件。
示例:
子組件模板:
<template>
<div>
<slot :data="componentData"></slot>
</div>
</template>
<script>
export default {
data() {
return {
componentData: 'Some data from child component'
};
}
};
</script>
父組件使用作用域插槽獲取子組件數(shù)據(jù):
<template>
<custom-component>
<template v-slot:default="slotProps">
<p>{{ slotProps.data }}</p>
</template>
</custom-component>
</template>
通過以上三種插槽類型,Vue提供了靈活的內(nèi)容分發(fā)機(jī)制,使組件的復(fù)用更加方便和可擴(kuò)展。