网站被谷歌降权软文发稿网
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)