插槽

刀刀

3/20/2025

0 字

0 分钟

使用

子组件 Child.vue ：

<template>
	<div>Child</div>
	<slot />
</template>

父组件：

<template>
	<div>Parent</div>
	<Child>124</Child>
</template>

<script setup>
import Child from './Child.vue'
</script>

渲染作用域

插槽作用域取决于组件在哪里定义，作用域就在哪里。与组件最终放置渲染地方无关。

子组件 Child.vue ：

<template>
	<div @click="show">
		<slot />
    </div>
</template>

<script setup>
import { ref } from 'vue';
const text = ref('子组件')

const show = () => {
    console.log(text.value)
}
</script>

父组件：

<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 函数方法与变量。

默认值

子组件 Child.vue ：

<template>
	<div>
        <slot>默认值</slot>
    </div>
</template>

<script setup>
</script>

父组件：

<template>
	<Child>
    	<div>click</div>
    </Child>
</template>

<script setup>
import Child from './Child.vue'
</script>

此时父组件传了一个内容为 click 的盒子，子组件接收页面渲染为 click ，如果父组件不传，则默认渲染“默认值”。

具名插槽

要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的 <template> 元素，并将目标插槽的名字传给该指令：

子组件 Child.vue ：

<template>
	<div>
        <slot name="top"></slot>
        <slot name="middle"></slot>
        <slot name="bottom"></slot>
    </div>
</template>

<script setup>
</script>

父组件：

<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>

总结：

1. 如果不起名，插槽默认名称为 default ，父组件不使用具名插槽的内容都会在这里渲染。
2. 具名插槽的使用：v-slot:插槽名称 （简写形式：#插槽名称 ）。

动态插槽名

插槽名称也是可以动态设置的，设置的方式与类名相同，同样也受相同的语法限制。

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

插槽传递数据

子组件 Child.vue ：

<template>
	<div>
        <slot id="1" title="刀刀" content="内容"></slot>
    </div>
</template>

<script setup>
</script>

父组件：

<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>

简写默认插槽

<template>
	<Child #default="record">
        {{record}}
    </Child>
</template>

<script setup>
import Child from './Child.vue'
</script>

此时无法再使用其他插槽，无效果且会报错。