0

我有一个模板:

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

和一个组件:

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

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

4

1 回答 1

1

您可以使用非强制性道具将您想要的标签类型传递给组件,并根据传递的值将内容包装到动态组件中(在示例中,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)
  }
}
于 2021-10-27T13:37:29.543 回答