vue2中遇到的问题与解决方案（自用）

---

1 、在vue2中怎么能成功渲染字符串中存在自定义组件

比如，前端样式定义后由接口返回想渲染的样式，如果此时直接使用v-html，那么vue的自定义组件或者ui框架的组件是会被直接引用不能编译成功

---

解决方案：

此时想到vue官网使用render函数和动态组件实现

动态组件

<template><div v-html="compiledContent"></div>
</template><script>
import Vue from 'vue'const compileTemplate = (templateString, propsData)=>{const Ctor = Vue.extend({template: `<div id="temporary">${templateString}</div>`,data() { return propsData; }});let vm;document.body.insertAdjacentHTML('beforeend', '<div id="temp"></div>');try {vm = new Ctor().$mount('#temp');return vm.$el.innerHTML;} finally {if(vm){vm.$destroy();}document.getElementById('temporary')?.remove();// document.getElementById('temp')?.remove();}
}
export default {name: 'DynamicHtmlRenderer',props: ['content'],computed: {compiledContent(){console.log(this.content)return this.content ? compileTemplate(this.content,{}) : '';}},
}
</script>

vue文件中使用

<template><component :is="dynamicComponentName" :content="item"></component>
</template>
<script>
import renderHtml from '@/components/renderHtml.vue';
export default {components: {renderHtml},data(){return {//此时red是全局组件templateString: `<div>关注点：<br/>部分地市资源申请后使用不足。119个集团申请成员储备活动，54个集团有效开展（拓展<red>7525</red>户）。忻州、晋城、临汾请提升使用效率。</div>`}},computed: {dynamicComponentName() {return 'renderHtml';}}
}
</script>

这里我遇到一个问题就是Vue.extend、Vue.compile 不存在，此时也引入了vue-template-compiler 插件，发现因为Vue.extend、Vue.compile  这2个方法在vue的完整的版本里面才有，如果想在运行中存在的话 要在vue.config.js 中设置，如下：

第一种如果报错限制了resolve 就使用第二种

2、insertAdjacentHTML()  

将文本解析为 element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快

使用

element.insertAdjacentHTML(position,text)