vue如何渲染含变量的模板字符串

有个需求是这样的：在富文本里如何套用带有变量的模板字符串。
富文本里的内容都是带标签的模板字符串，但是如果要在富文本里套用带有变量的模板字符串，比如这种：

 `<div>这是图文文章的{{title}}</div><div>这是图文文章的内容{{content}}</div>`

那么我们就可以用Vue构造器extends来解决了

data(){
  return{
        content: '我是内容，很长很长的哦！',
        title: '我是标题哦！'
  }
}
//下面的methods里面的方法，可自行设置到需要用到的地方
_setTemplate() {
  let ele = document.createElement("div");
  ele.setAttribute("id", "pic-point");
  let picTemplate = `<div>这是图文文章的{{title}}</div><div>这是图文文章的内容{{content}}</div>`
  let Profile = Vue.extend({
            template: this.picTemplate,
            data: () => {
              return {
                content: this.content,
                title: this.title
              };
            },
      });
  const lincontent = new Profile().$mount(ele);
  const htmlTemplate = this.nodeToString(lincontent.$el);
  // htmlTemplate就是你想要的东西了，就可以直接赋值到富文本当模板使用了，这个一般是管理端的需求 
},

// 将dom对象转换成str对象
    nodeToString(node) {
      //createElement()返回一个Element对象
      var tmpNode = document.createElement("div");
      //appendChild()  参数Node对象   返回Node对象  Element方法
      //cloneNode()  参数布尔类型  返回Node对象   Element方法
      tmpNode.appendChild(node.cloneNode(true));
      var str = tmpNode.innerHTML;
      tmpNode = node = null; // prevent memory leaks in IE
      return str;
    },