奇淫巧技-vue动态渲染html/script模板

vue动态渲染html/script模板

场景：页面html，script从接口动态获取，渲染出页面

解决：

1.定义方法

newVue(script, html) {

  let main = eval(`(${script})`);
  
  main.template = `<div>${html}</div>`;

  new Vue({
    components: {
      test: main
    },
    data() {
      return {
      }
    },
    template: `<div><test/></div>`
  }).$mount('#app')
}

}

2.调用

newVue('{components:{},data(){return{text:'111'}},created(){},mounted(){},methods:{}}','<div><span>{{text}}</span></div>')

展示结果