制作类似于material ui的vue slot结构

【问题标题】：Make vue slot structure similar to material ui制作类似于material ui的vue slot结构
【发布时间】：2021-05-25 15:09:36
【问题描述】：

这是我目前的代码：

<tr :key="index" v-for="(item, index) in items">
  <td v-for="header in headers" :key="header.value">
    {{ item[header.value] }}
  </td>
  <td>
    <slot name="actions" v-bind:item="data[index]"></slot>
  </td>
</tr>

我想要的是拥有并覆盖类似于材质ui的表格列槽，如下所示：

<template v-slot:item.age="{item}">
  <div> {{formatAge(item.age)}} </div>
</template>

我如何实现像对象一样对待它的命名槽？

【问题讨论】：

标签： javascript vue.js material-ui vue-slot

【解决方案1】：

我认为这样的事情应该可行：

<tr :key="index" v-for="(item, index) in items">
  <td v-for="header in headers" :key="header.value">
    <slot :name="header.value" v-bind:item="item">
      {{ item[header.value] }}
    </slot>
  </td>
  <td>
    <slot name="actions" v-bind:item="data[index]"></slot>
  </td>
</tr>

然后，覆盖默认槽值：

<template v-slot:age="{item}">
  <div> {{formatAge(item.age)}} </div>
</template>

【讨论】：

您的回答是对的，但我将:name="header.value" 更改为:name="`item.${header.value}`"。我只是感到困惑，因为我期待一个空白数据，因为您必须有一个插槽来显示数据，但它会退回到 item[header.value]
没关系，现在我想起来了，插槽的任何孩子都是后备