我已经读了大约100个关于这个的帖子,仍然不能完全理解。
我尝试从后端API解析字符串模板并使用自定义组件呈现它。
我在vite.config.js
中别名了esm build:
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
vue: 'vue/dist/vue.esm-bundler.js',
},
},
下面是我的组件:
<script>
import { defineAsyncComponent, h } from 'vue';
export default {
components: {
PageCalculator: defineAsyncComponent(() => import('@/components/PageCalculator.vue')), /* eslint-disable-line */
},
props: {
content: {
type: String,
default: '',
},
},
render() {
const render = {
template: `<div class="content">${this.content}</div>`,
};
return h(render);
},
};
</script>
这给出了错误Failed to resolve component
。
如何动态加载组件?我有大量的组件,后端可以发送回来,所以我想懒惰地加载它们。
下面是如何从外部组件使用它:
<app-page :title="page.title" container-class="w-full">
<compiled-content :content="page.content_html" />
</app-page>
HTML的内容可能看起来像这样(content
prop ):
<p>this is a nice sentence</p>
<page-calculator />
<p>this is a <router-link :to="{name: 'home'}">link</router-link></p>
2条答案
按热度按时间jckbn6z71#
你应该更好地使用Vue
slots
而不是props
你也不应该插入HTML,因为它不能与组件一起工作。
使用Vue
Render Functions
代替。46scxncf2#
这是一个痛苦的旅程,但答案是如此简单。
下面是如何从服务器动态呈现vue组件的方法,即使它们混合在html中
我非常惊讶答案不是在更多的地方。..人们让我注册全局组件,使用不起作用的方法。实际上,我最终只是偶然发现了它在我自己,而试图拼凑成吨不同的答案。
以下是最终版本:
1.从服务器实时编译vue代码
1.使用该组件中的组件和方法执行此操作,而不需要全局组件
如果你的内容中有很多组件,你也可以让它们都是异步组件: