Vue $options.template 只工作一次

Question

我尝试构建一个动态 Vue 组件，我将模板字符串作为 prop 传递并希望组件呈现它。

this.$options.template = this.htmlString;

在我尝试更改模板之前，这似乎工作正常。当 htmlString 更改时，我无法让组件重新呈现。有办法吗？

我也尝试了 render 功能和 Vue.compile 但我真的不知道如何使用它们。这会引发错误：

render(createElement) {
  return Vue.compile(this.htmlString).render(createElement);
}

Answer 1

在 Vue 2 中 compile returns 具有 render 方法的对象。由于 Vue 组件是一个对象，它应该有 render 或 template 属性，一个对象被 createElement 识别为一个组件，并且可以直接传递给它：

render(createElement) {
  return createElement(Vue.compile(this.htmlString));
}

compile 可以移动到计算以跳过不必要的调用：

computed: {
  HtmlComp() {
    return Vue.compile(this.htmlString);
  }
},
render(createElement) {
  return createElement(this.HtmlComp);
}

相同，根据 API 的变化进行了调整。

Vue $options.template works only once