(Vue) 在插槽内容中读取父级的道具答案

【问题标题】：(Vue) Reading parent's props in slot content(Vue) 在插槽内容中读取父级的道具
【发布时间】：2022-07-06 01:56:06
【问题描述】：

我有一个表格组件，它采用一个“变体”道具，它简单地规定了一些要应用的 css 样式。我使用它如下：

<BaseTable :variant="'with_background'" :columns="[{ name: 'Datum' }, { name: 'Bedrag', alignment: 'right' }, { name: 'Verkoper' }, { name: 'Status' }]">
  <BaseTableRow v-for="(pastOrder, index) in pastOrders" :key="index" :variant="'with_background'">
    <BaseTableCell :variant="'with_background'">{{ pastOrder.date }}</BaseTableCell>
    <BaseTableCell :variant="'with_background'" :alignment="'right'">€{{ pastOrder.amount }}</BaseTableCell>
    <BaseTableCell :variant="'with_background'">{{ pastOrder.supplier }}</BaseTableCell>
    <BaseTableCell :variant="'with_background'">
      <BaseBadge :variant="pastOrder.status.variant">{{ pastOrder.status.text }}</BaseBadge>
    </BaseTableCell>
  </BaseTableRow>
</BaseTable>

如您所见，表格行和单元格也需要 variant 属性。表格行只是在 BaseTable.vue 中填充默认的<slot></slot>。我很想将变体属性传递给在该插槽中呈现的项目，这样我只需更改 BaseTable 上的变体即可在所有子组件上更改它。这可能吗？现有问题似乎讨论了父组件中插槽属性的用法，但是每当我创建表格时，我仍然必须将其添加到每个单元格中。

提前致谢！

【问题讨论】：

可能，但并不简单。您需要从渲染函数中的插槽解析 vnodes 并添加自定义道具，这是合法但未记录的技术。考虑重写 css，以便受 BaseTable 中 with_background 影响的样式会影响嵌套组件

标签： vue.js vue-component vue-props vuejs-slots

【解决方案1】：

如果我理解正确，以下可能是目前最好的选择：

<BaseTable :variant="'with_background'" v-slot="{ variant }" :columns="[{ name: 'Datum' }, { name: 'Bedrag', alignment: 'right' }, { name: 'Verkoper' }, { name: 'Status' }]">
  <BaseTableRow v-for="(pastOrder, index) in pastOrders" :key="index" :variant="variant">
    <BaseTableCell :variant="variant">{{ pastOrder.date }}</BaseTableCell>
    <BaseTableCell :variant="variant" :alignment="'right'">€{{ pastOrder.amount }}</BaseTableCell>
    <BaseTableCell :variant="variant">{{ pastOrder.supplier }}</BaseTableCell>
    <BaseTableCell :variant="variant">
      <BaseBadge :variant="pastOrder.status.variant">{{ pastOrder.status.text }}</BaseBadge>
    </BaseTableCell>
  </BaseTableRow>
</BaseTable>

然后在底层组件中，我使用<slot :variant="variant"></slot> 将其传递给行和单元格。我仍然想知道是否可以在每次使用此表时不在父组件中的每个单元格上指定 :variant="variant" ..

【讨论】：