根据条件将 v-slot 元素包装在不同的父级中

Question

我有一个模板：

<template v-slot:title>
  {{ $t('title') }}
</template>

还有一个组件：

<v-col cols="12">
 <h5 class="text-h5">
   <slot name="title" />
 </h5>
</v-col>

我只想为一个特定实例使用<h4> 标记包装插槽。我尝试将其包装在模板中，但没有效果。如何交换包裹插槽的元素？

Answer 1

您可以使用非强制 prop 将您想要的标签类型传递给组件，并根据传递的值将内容包装到动态组件中（在示例中 h2、h3 和 h4 是正确的值）

在组件模板中：

<v-col cols="12">
  <component :is="wrapper" :class="`text-${wrapper}`">
    <slot name="title" />
  </component>
</v-col>

在组件脚本中：

props: {
  wrapper: {
    type     : String,
    required : false,
    default  : 'h5',
    validator: value => [ 'h2', 'h3', 'h4' ].includes(value)
  }
}