(1).通过http请求获取组件数据，然后使用http-vue-loader插件解析script(解析为各生命周期钩子函数和methods对象),然后动态注册为vueComponent使用。 通过:is 来动态切换组件。
必须使用全量vue库，因为需要Vue来解析template模板为render函数。
vue-cli中默认使用的时运行时vue库，需要配置vue.config.js加入vue运行时编译模块:
module.exports = { runtimeCompiler: true, }
import httpVueLoader from "http-vue-loader";
const mTpl = await DictionaryInfo(filter);//axios调用// 调用接口获取动态组件数据：{ template: "<div class=\"main\"> xxx </div> ", script: "module.exports = {data() {}, mounted() {}, methods: {} }", style: ".main { width: 100% }"
If(!mTpl?.script) return;
loadStyleString(mTpl.style);//读取配置中的css，加入到页面
const scriptStr= `<script>${mTpl.script}<\/script>`;
//解析script字符串
httpVueLoader("data:text/plain," + encodeURIComponent(scriptStr))().then(compiler => {Vue.component(mTpl.name, { mixins: [compBase], template: mTpl.template, ...compiler });
});
function loadStyleString(cssText) {//Chrome 112：CSS 支持嵌套语法,可以直接写嵌套css了var style = document.createElement("style");try { style.appendChild(document.createTextNode(cssText)); } catch (ex) {// IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性style.styleSheet.cssText = cssText;}document.getElementsByTagName("head")[0].appendChild(style);
}(2).也可以使用vue2-sfc-loader来解析template script(template解析为render函数，script解析为各生命周期钩子函数和methods对象)后再注册为VueComponent。
可以只使用运行时vue库，因为template已由vue2-sfc-loader解析了，可不用全量vue库。
const tpl = await DictionaryInfo(filter);//axios调用// 调用接口获取动态组件数据：{ template: "<div class=\"main\"> xxx </div> ", script: "module.exports = {data() {}, mounted() {}, methods: {} }", style: ".main { width: 100% }"
const options = {moduleCache: { vue: Vue },getFile(url) {return `${tpl.template}<script>${tpl.script}<\/script><style>${tpl.style}<\/style>`;},addStyle(textContent) {//Chrome 112：CSS 支持嵌套语法,可以直接写嵌套css了const style = document.createElement("style");try { style.appendChild(document.createTextNode(textContent)); } catch (ex) {// IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性style.styleSheet.cssText = textContent;}document.getElementsByTagName("head")[0].appendChild(style);}
}
const pl = await loadModule('/xxx.vue', options);//解析后返回render函数、生后周期钩子函数、methods组成的对象
if (pl) Vue.component(tpl.name, { mixins: [mixins], ...pl })
