Vue3开发极简入门（18）：插槽Slot

大家好，欢迎来到IT知识分享网。

大家一看代码就知道插槽用在什么地方了。

简单说就是父组件在引用子组件时，里面填写的内容，可以填充到子组件的<slot></slot>里面。

默认插槽

src/components/MyBtn.vue：

<template> <button class="solid-button red-button"> <slot>默认内容</slot> </button> </template> <script lang='ts' setup name='MyBtn'> </script> <style scoped> .solid-button { display: inline-block; padding: 10px 20px; font-size: 16px; color: white; text-align: center; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; } .red-button { background-color: red; } </style>

src/slot/SlotFather.vue：

<template> <div class="slotFather"> <h1>默认插槽</h1> <MyBtn>提交</MyBtn> <MyBtn>保存</MyBtn> <MyBtn> <span style="color: blue;">确认</span> <br /> <button>测试</button> </MyBtn> <MyBtn /> </div> </template> <script lang='ts' setup name='SlotFather'> import MyBtn from '@/components/MyBtn.vue'; </script> <style scoped> .slotFather { background-color: moccasin; color: black; }

具名插槽

MyBtn2.vue：

<template> <div> <slot name="beforeBtn"></slot> </div> <button class="gradient-button"> <slot name="btnText">默认内容</slot> </button> </template> <script lang='ts' setup name='MyBtn2'> </script> <style scoped> .gradient-button { display: inline-block; padding: 10px 20px; font-size: 16px; color: white; text-align: center; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; background: linear-gradient(to right, green, darkgreen); } </style>

SlotFather.vue：

<h1>具名插槽</h1> <MyBtn2> <template #beforeBtn> <span style="color: red;">前置内容</span> </template> <template #btnText>提交</template> </MyBtn2>

说明：

跟上面的默认插槽结合看，代码很明晰了，不解释了。

其实写法应该是<template v-slot:beforeBtn>，但是可以简写<template #beforeBtn>

条件插槽

有时候可以根据插槽是否存在来决定是否渲染内容，例如上面的beforeBtn，如果父组件不传相应内容，就不渲染。

MyBtn2.vue：

<template> <div v-if="$slots.beforeBtn"> <slot name="beforeBtn"></slot> </div> <button class="gradient-button"> <slot name="btnText">默认内容</slot> </button> </template>

SlotFather.vue：

<h1>条件插槽</h1> <MyBtn2> <template #btnText>保存</template> </MyBtn2>