插槽
刀刀
0字
0分钟
2026/8/16
Vue3 使用
vue
<template>
<div>Child</div>
<slot />
</template>vue
<template>
<div>Parent</div>
<Child>124</Child>
</template>
<script setup>
import Child from './Child.vue'
</script>Vue3 渲染作用域
插槽作用域取决于组件在哪里定义，作用域就在哪里。与组件最终放置渲染地方无关。vue
<template>
<div @click="show">
<slot />
</div>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('子组件')
const show = () => {
console.log(text.value)
}
</script>vue
<template>
<Child>
<div @click="show">click</div>
</Child>
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const text = ref('父组件')
const show = () => {
console.log(text.value)
}
</script>最终触发点击事件的是父组件的 show 函数方法与变量。
Vue3 默认值
vue
<template>
<div>
<slot>默认值</slot>
</div>
</template>
<script setup></script>vue
<template>
<Child>
<div>click</div>
</Child>
</template>
<script setup>
import Child from './Child.vue'
</script>此时父组件传了一个内容为 click 的盒子，子组件接收页面渲染为 click ，如果父组件不传，则默认渲染“默认值”。
Vue3 具名插槽
要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的 <template> 元素，并将目标插槽的名字传给该指令：
vue
<template>
<div>
<slot name="top"></slot>
<slot name="middle"></slot>
<slot name="bottom"></slot>
</div>
</template>
<script setup></script>vue
<template>
<Child>
<template v-slot:top>top</template>
<template v-slot:middle>middle</template>
<template #bottom>bottom</template>
</Child>
</template>
<script setup>
import Child from './Child.vue'
</script>总结
- 如果不起名，插槽默认名称为
default，父组件不使用具名插槽的内容都会在这里渲染。 - 具名插槽的使用：
v-slot:插槽名称（简写形式：#插槽名称）。
Vue3 动态插槽名
插槽名称也是可以动态设置的，设置的方式与类名相同，同样也受相同的语法限制。
vue
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
<!-- 缩写为 -->
<template #[dynamicSlotName]>
...
</template>
</base-layout>Vue3 插槽传递数据
vue
<template>
<div>
<slot id="1" title="刀刀" content="内容"></slot>
</div>
</template>
<script setup></script>vue
<template>
<Child>
<!-- 全部获取 -->
<template v-slot:default="record">
{{ record }} // {id: 1, title: 刀刀, content: 内容}
</template>
<!-- 单独获取 -->
<template v-slot:default="{ id }"> {{ id }} // 1 </template>
</Child>
</template>
<script setup>
import Child from './Child.vue'
</script>Vue3 简写默认插槽
vue
<template>
<Child #default="record">
{{ record }}
</Child>
</template>
<script setup>
import Child from './Child.vue'
</script>此时无法再使用其他插槽，无效果且会报错。
贡献者
duyidao 刀刀