v-slot
用于聲明具名插槽 或 作用域插槽滥朱；簡(jiǎn)寫模式：v-slot:top > #top
<slot />
在封裝組件時(shí)虱疏，可以通過(guò)<slot>標(biāo)簽定義插槽，從而給預(yù)留內(nèi)容占位；
插槽的html, css內(nèi)容寫在調(diào)用組件的父組件中毛仪；
匿名插槽
子組件.vue
<template>
<div class="card-wrapper">
<div class="top">標(biāo)題</div>
<slot></slot> // 占位符搁嗓，預(yù)留內(nèi)容
</div>
</template>
<template>
<Left>
<h4>{{ msg1 }}</h4>
</Left>
<Left>
<h5>{{ msg2 }}</h5>
</Left>
</template>
<script>
import Left from "./components/Left.vue";
export default {
components: {
Left,
},
data() {
return {
msg1: "給h4的內(nèi)容",
msg2: "這是給h5...",
};
},
};
</script>
如果調(diào)用組件沒有傳內(nèi)容，可默認(rèn)內(nèi)容
父組件.vue
<template>
<Left></Left>
</template>
子組件.vue
<template>
<div class="card-wrapper">
<div class="top">標(biāo)題</div>
<slot>沒有內(nèi)容</slot>
</div>
</template>
具名插槽
在封裝組件時(shí)可以預(yù)留多個(gè)插槽箱靴，為每個(gè)<slot>插槽指定具體的name名稱腺逛；
子組件.vue
<template>
<div class="card-wrapper">
<div class="top">
<slot name="top"></slot>
</div>
<slot>默認(rèn)內(nèi)容</slot> // 等價(jià)于 <slot name="default">默認(rèn)內(nèi)容</slot>
<div class="bot">
<slot name="bot"></slot>
</div>
</div>
</template>
父組件.vue
<template>
<Left>
<template #top>
<div>商品1</div>
</template>
<div style="height:100px;">
{{ msg }}
</div>
<template v-slot:bot>
<div style="color:red">2022-04-28</div>
</template>
</Left>
</template>
作用域插槽
獲取子組件插槽的數(shù)據(jù)
子組件.vue
<template>
<div class="card-wrapper">
<div class="top">
<slot name="top"></slot>
</div>
<slot :content="info"></slot>
<div class="bot">
<slot name="bot" :timer="stampTime"></slot>
</div>
</div>
</template>
<script>
export default {
props:{
info:Object,
stampTime: Object,
}
}
</script>
父組件.vue
<Left :info="info" :stamp-time="timer">
<template #top>
<div>商品1</div>
</template>
<template #default="{ content }">
<div>{{ content.name }}</div>
<div>{{ content.desc }}</div>
</template>
<template #bot="{ timer }">
<div style="color: red">
{{ timer.hour }}-{{ timer.min }}-{{ timer.sec }}
</div>
</template>
</Left>
<script>
import Left from "./components/Left.vue";
export default {
components: { Left },
data() {
return {
info: {
name: "一件不同尋常的商品",
desc: "奇幻、科幻衡怀、夢(mèng)幻",
},
timer: {
hour: "12",
min: "59",
sec: "59",
},
};
},
};
</script>
<Left>
<template #[whichSlot]>
<div>這是內(nèi)容</div>
</template>
</Left>
<script>
import Left from "./components/Left.vue";
export default {
components: { Left },
data() {
return {
whichSlot: 'default'
};
},
};
</script>
透?jìng)髅宀?和 作用域插槽
<template>
<my-input v-model="searchValue" placeholder="請(qǐng)輸入">
<template #addonBefore>
<StrikethroughOutlined />
</template>
</my-input>
</template>
<script lang="ts" setup>
import { StrikethroughOutlined } from "@ant-design/icons-vue";
</script>
<template>
<a-input ref="inputRef" v-bind="$attrs">
<!--
1. UI組件的命名插槽
<template #addonBefore>
<StrikethroughOutlined />
</template>
-->
<!--
2. 將自定義組件的命名插槽 傳遞給 UI組件的命名插槽棍矛；
這種方案在沒有傳遞內(nèi)容時(shí)， 依然給UI組件的命名插槽addonBefore傳了空內(nèi)容的<slot name="before"/>標(biāo)簽過(guò)去抛杨；
<template #addonBefore>
<slot name="before"></slot>
</template>
-->
<!-- 3. 將傳遞給自定義組件標(biāo)簽上的所有屬性和方法够委，綁定透?jìng)鹘oUI組件上 -->
<template v-for="(value, slotName) in $slots" #[slotName]="slotData">
<!-- 再將UI組件的插槽數(shù)據(jù)slotData重新綁定到自定義組件的命名插槽上 -->
<slot :name="slotName" v-bind="slotData || {}"></slot>
</template>
</a-input>
</template>
<script setup>
import { ref } from "vue";
const inputRef = ref(null);
</script>
