vue中v-html使用，后端传递回来的数据中存在vue事件和变量怎么处理

1.本章摘要

在数据库的某个字段中保存了一些布局样式的信息，并且在某些标签中还含有click事件，动态clss，style以及v-if，v-show等，如果我们直接只用v-html来展示数据的话，是能够呈现给用户的，但是缺少交互，添加的事件，变量都被当做html元素的属性处理了，故不能单纯的使用v-html来完成带有交互的后端字符排版文件。

那么具体怎么做呢？

>>> 积极尝试一

1.官方文档中有说到，渲染函数render，创建虚拟dom节点，用一个组件去包裹，比如

Vue.component("anchored-heading", {
  render(createElement, context){
    // 完全透传任何特性、事件监听器、子节点等。
    return createElement('button', context.data, context.children)
  },
  props: {
    msg: {
      type: String,
      default: "世界那么大"
    }
  },
  methods: {
    test() {
      console.log("欢迎，你成功了");
    }
  }
});

但是像这种比较费劲复杂，可以通过模板的形式做，如下

Vue.component("anchored-heading", {
  template: `
{{ msg }}测试用例`,
  props: {
    msg: {
      type: String,
      default: "世界那么大"
    }
  },
  methods: {
    test() {
      console.log("欢迎，你成功了");
    }
  }
});

还可以使用模板编译，Vue.compile，使用该函数的前提是vuejs包含了该部分的代码，为了缩小vuejs的体积，线上vuejs是不包含编译的，如果要使用，就得使用包含编译的代码

import Vue from "vue";

let res = Vue.compile(
  `
{{ msg }}测试用例`
);
Vue.component("anchored-heading", {
  render: res.render,
  props: {
    msg: {
      type: String,
      default: "世界那么大"
    }
  },
  methods: {
    test() {
      console.log("欢迎，你成功了");
    }
  }
});

Vue.compile返回的是一个对象，包含了staticRenderFns（数组），render（函数）两个值，render就是那个渲染函数

image.png

>>> 积极尝试二

使用Vue.extend扩展函数，基于基础Vue构造器，创建一个"子类"，参数一个包含组件选项的对象，要注意data选项是特例，必须是一个函数，不是一个对象

// 创建构造器
var Profile = Vue.extend({
  template: '
{{firstName}} {{lastName}} aka {{alias}}
',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

// 或者
let component = new Profile().$mount()
let dom = document.querySelector("#mount-point");
while (dom.hasChildNodes()) {
  dom.removeChild(dom.firstChild);
}
dom.appendChild(component.$el);

结果如下

Walter White aka Heisenberg

如上就能够解决v-html不能完全解决的问题啦！