Vue3中如何通过动态名称调用组件的动态插槽？

你的问题出在动态插槽名的语法使用错误上，Vue3中要匹配子组件的动态命名插槽，需要使用方括号包裹动态表达式的语法，而不是直接在插槽名里写插值。

正确写法示例 #

<TableContainer :data="people">
  <!-- 动态匹配statuses-xxx插槽 -->
  <template v-for="person in people" v-slot:[`statuses-${person.id}`]>
    {{ person.status }}  
  </template>

  <!-- 同理，匹配actions-xxx插槽 -->
  <template v-for="person in people" v-slot:[`actions-${person.id}`]>
    <button @click="handleEdit(person.id)">编辑</button>
    <button @click="handleDelete(person.id)">删除</button>
  </template>
</TableContainer>

为什么原写法无效 #

你之前写的v-slot:statuses-{person.id}会被Vue当成字面量插槽名，它不会解析{person.id}这个插值表达式，所以根本匹配不到子组件里动态生成的statuses-1、statuses-2这类插槽。而用方括号包裹的v-slot:[statuses-${person.id}]，Vue会动态计算表达式的值，生成对应的插槽名，从而和子组件的动态插槽一一对应。

额外注意事项 #

• 确保父组件中的people数据已经正确初始化，并且能被v-for遍历到
• 如果person.id是数值类型，模板字符串会自动将其转为字符串，无需额外处理
• 也可以用字符串拼接的方式代替模板字符串，比如v-slot:['statuses-' + person.id]，效果完全一致

内容的提问来源于stack exchange，提问作者John