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

Question

I have a table component that takes a 'variant' prop which simply dictates some css styles to apply. I use it as follows:

<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>

As you can see, the variant prop is also required by the table rows and cells. The table rows simply fill a default <slot></slot> in BaseTable.vue. I would love to pass the variant property to the items that are rendered in that slot, so that I would only have to change the variant on BaseTable to change it on all subcomponents. Is this possible? Existing questions seem to discuss the usage of slot properties in the parent component, but then I would still have to add it to every cell whenever I create a table.

Thanks in advance!

Answer 1

If I understand correctly, the following is probably currently the best option:

<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>

And then in the underlying components, I use <slot :variant="variant"></slot> to pass it onto the rows and cells. I do still wonder if that is possible without specifying :variant="variant" on every cell in the parent component every time I use this table..