72.动态插槽名称&无渲染组件与可组合

动态插槽名称

使用动态插槽名，这对于多步骤表单或表格组件等情况非常有用。下面我们看看如何在运行时动态生成插槽：

Child.vue

<script setup lang="ts">
defineProps<{ items: Array<{ id: string; name: string }> }>();
</script>
<template>
  <div v-for="item in items" :key="item.id">
    <slot :name="item.name" />
  </div>
</template>

这样，我们就可以在父组件中使用 v-slot:[item.name] 语法为 items 数组中的每个项目动态生成槽名：

Parent.vue

<script setup lang="ts">
import Child from './components/Child.vue';
const items: Array<{ id: string; name: string }> = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
];
</script>
<template>
  <Child :items="items">
    <template v-for="item in items" v-slot:[item.name]>
      <p>Hello from {{ item.name }}</p>
    </template>
  </Child>
</template>

我们也可以使用缩写 #[item.name] 来代替 v-slot:[item.name] 。

可组合组件与无渲染组件

React 中有无渲染组件，Vue 中查了一下，确实有无渲染组件。

为了更好地理解无渲染组件，我们需要知道什么是作用域插槽。我们快速回顾一下作用域插槽：