公司网站转微信小程序,wordpress淘客板块,网站管理系统软件,网站建设案例分析题1 、在vue2中怎么能成功渲染字符串中存在自定义组件 比如#xff0c;前端样式定义后由接口返回想渲染的样式#xff0c;如果此时直接使用v-html#xff0c;那么vue的自定义组件或者ui框架的组件是会被直接引用不能编译成功 解决方案#xff1a; 此时想到vue官网使用render函… 1 、在vue2中怎么能成功渲染字符串中存在自定义组件 比如前端样式定义后由接口返回想渲染的样式如果此时直接使用v-html那么vue的自定义组件或者ui框架的组件是会被直接引用不能编译成功 解决方案 此时想到vue官网使用render函数和动态组件实现 动态组件
templatediv v-htmlcompiledContent/div
/templatescript
import Vue from vueconst compileTemplate (templateString, propsData){const Ctor Vue.extend({template: div idtemporary${templateString}/div,data() { return propsData; }});let vm;document.body.insertAdjacentHTML(beforeend, div idtemp/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文件中使用
templatecomponent :isdynamicComponentName :contentitem/component
/template
script
import renderHtml from /components/renderHtml.vue;
export default {components: {renderHtml},data(){return {//此时red是全局组件templateString: div关注点br/部分地市资源申请后使用不足。119个集团申请成员储备活动54个集团有效开展拓展red7525/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)
