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