通过动态名称调用Vue插槽

dw1jzc5e  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(99)

我有一个名为TableContainer的组件,它具有以下动态命名的插槽

// ...
<td class="...">
    <slot :name="'statuses-' + item.id" />
</td>

<td class="">
    <slot :name="'actions-' + item.id" />
</td>
//...

字符串
我想从父组件调用它们,如下所示:

<TableContainer :data="people">

  <template v-for="person in people" v-slot:statuses-{person.id}>
     {{ person.status }}  
  </template>

</TableContainer>


这根本不管用。但当我把它像下面,它是工作,和绘画状态的第一行。

<TableContainer :data="people">

  <template v-for="person in people" v-slot:statuses-1>
     {{ person.status }}  
  </template>

</TableContainer>


注意,我将v-slot:statuses-{person.id}v-slot:statuses-1交换。
如何在提供动态名称的同时调用插槽。
我用的是Vue 3

iezvtpos

iezvtpos1#

看看动态插槽名称的语法。试试看

<template v-for="person in people" v-slot:[`statuses-${person.id}`]>
     {{ person.status }}  
  </template>

字符串

相关问题