【前端】VUE动态引入组件 通过字符串动态渲染模板

应用场景：

js增强 动态代码 扩展一类的  可以配合低代码平台等  灵活配置在线表单  在线列表等 适合灵活性 扩展性比较强的组件

VUE2

javascript"><template><div><textarea v-model="templateString"></textarea><div><component :is="component"></component></div></div>
</template><script>
import Vue from 'vue';//这里如果之前全局引用过 则不用再引用
import Antd from 'ant-design-vue';
//这里如果之前全局引用过 则不用再引用
import 'ant-design-vue/dist/antd.css';Vue.use(Antd);export default {data() {return {templateString: `<div><h1> message </h1><button>Change Message</button><a-progress :percent="30" /><a-progress :percent="50" status="active" /><a-progress :percent="70" status="exception" /><a-progress :percent="100" /><a-progress :percent="50" :show-info="false" /></div>`,component: null};},watch: {templateString(newTemplate) {if (newTemplate) {console.log('渲染', newTemplate)this.createDynamicComponent(newTemplate);}}},methods: {createDynamicComponent(templateString) {// 使用 Vue.component 创建动态组件this.component = Vue.component('dynamic-component', {template: templateString});},}
};
</script>

使用带编译器的 Vue 版本

你可以使用包含模板编译器的 Vue 版本，它支持直接编译模板字符串。你需要在 vue.config.js 中指定这一点：

module.exports = { runtimeCompiler: true };

这样你就可以使用包含编译器的 Vue 版本，并且可以动态编译模板字符串。

VUE3

javascript"><template><div><textarea v-model="templateString"></textarea><div><dynamic-component :is="dynamicComponentId"></dynamic-component></div></div>
</template><script>
import { defineAsyncComponent } from "vue";export default {data() {return {templateString: `<template><div><h1>{{ message }}</h1><button @click="changeMessage">Change Message</button></div></template><script>export default {data() {return {message: "Hello from dynamic component!"};},methods: {changeMessage() {this.message = "Message changed!";}}};</script>`,dynamicComponentId: null};},watch: {templateString(newTemplate) {if (newTemplate) {this.createDynamicComponent(newTemplate);}}},methods: {createDynamicComponent(templateString) {const DynamicComponent = defineAsyncComponent(() => {return new Promise((resolve, reject) => {try {// 解析模板字符串为组件定义const componentDefinition = JSON.parse(JSON.stringify({template: templateString,data: () => ({message: "Initial message"})}));resolve(componentDefinition);} catch (error) {console.error("Error parsing template string:", error);reject(error);}});});// 设置动态组件 IDthis.dynamicComponentId = DynamicComponent;}}
};
</script>

错误提示

"export 'defineAsyncComponent' was not found in 'vue'
需要使用VUE3