我有一个组件,它从这样的道具动态定义一组插槽:
<template v-for="(field, index) in fields">
<div
v-if="!field.hide"
:key="index"
class="my-class"
>
<slot :name="getSlotName(field.name, 'label')" />
</div>
</template>
我有一个组件 WrapperComponent
使用模板来填充这些插槽:
<slotted-component :fields="[{name: 'f1'}]">
<template #f1>
Some content here
</template>
</slotted-component>
而且我希望能够从 WrapperComponent
的父组件中覆盖 的内容,例如
<WrapperComponent>
<template #f1>
Some other content
</template>
</WrapperComponent>
我尝试在此模板中使用 PassThroughTemplate
组件:
<template>
<template v-slot:[name]>
<slot
:name="name"
v-bind="$attrs"
/>
</template>
</template>
但是如果不是在运行时编译,它会给我一个编译错误(在这种情况下只有 eslint 大喊大叫)。我想使用渲染函数,但这段代码没有渲染任何东西:
render (h, ctx) {
return h(
'template',
{slot: ctx.props.name},
h('slot', {name: ctx.props.name})
)
}
我不知道如何正确使用它。那么,有没有办法做到这一点或另一种方式来实现模板替换?