将一个 dom 元素使用 render 函数渲染在页面上

实现方案

• 将 dom 元素转换成 dom 字符串。
• 将 domStr 赋值给 domProps 的 innerHTML 属性。

参考代码

• 将 dom 元素转换成 dom 字符串。

    domToStr(dom) {
      const elem = document.createElement("div");
      elem.appendChild(dom);
      return elem.innerHTML;
    }

• 将 domStr 赋值给 domProps 的 innerHTML 属性。

  render(h) {
    const elem = this.getCapitals();
    const str = this.domToStr(elem);
    return h("div", {
      domProps: {
        innerHTML: str,
      },
    });
  },

注意事项

在 render 函数中 无法使用 v-html 指令。v-html 指令等价于

  domProps: {
    innerHTML: str,
  }

参考资料

参考代码