如何解决用render函数渲染的组件内部的动态组件
我在文档中看到,您可以在VueComponent中包含一个动态组件,如下所示:
<component :is="componentName" v-bind="componentProps" @custom-event="doSomething" />
我试图将这些动态组件之一包含在动态呈现的组件中(使用render()
函数,而不使用HTML模板)。没有太多希望,我已经尝试过了:
render(createElement: CreateElement) {
return createElement('component',props: {
'is': 'TestComponent'
});
}
但我知道了
[Vue warn]: Unknown custom element: <component> - did you register the component correctly?
再次,我不希望奇迹太多,而是尝试导入Component
并将其声明为组件:
@Component({
components: {
Component,TestComponent
}
})
export default class DynamicThingy extends Vue {
render(createElement: CreateElement): VNode {
return createElement('Component',{
props: {
'is': 'TestComponent'
}
});
}
}
但是我明白了
[Vue warn]: Do not use built-in or reserved HTML elements as component id: Component
有什么想法可能吗?
解决方法
createElement()
的第一个参数必须为
- HTML标记名称,
- 组件选项,
- 或解决其中一个问题的异步函数。
https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
因此,在渲染函数中,您可以简单地创建一个函数*,该函数将根据您期望的条件返回一个或另一个组件的选项,并将其作为您的第一个参数。 *此功能与您为确定:is属性所使用的功能相同)
您仅需要模板中的动态组件<component />
和:is
prop ,而您无法通过编程的方式进行操作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。