我有一个模板:
<template v-slot:title>
{{ $t('title') }}
</template>
和一个组件:
<v-col cols="12">
<h5 class="text-h5">
<slot name="title" />
</h5>
</v-col>
<h4>
我只想为一个特定实例用标签包装插槽。我尝试将其包装在模板中,但没有效果。如何交换包裹插槽的元素?
您可以使用非强制性道具将您想要的标签类型传递给组件,并根据传递的值将内容包装到动态组件中(在示例中,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)
}
}