Vue.js 2 中如何将 VNode 数组插入到指定元素？

vue.js 2 如何将 vnode 数组插入到指定元素中

问题的提出：

使用 Vue.js 2 开发时，需要将 VNode 数组插入到组件的某个元素中。但遇到以下问题：

• 问题 1：如何获取元素的 InnerHTML？
• 问题 2：在无法获取 InnerHTML 的情况下，如何将 VNode 数组插入到指定的元素中？

解决方案：

问题 1：获取 InnerHTML

要获取 InnerHTML，可以使用以下自定义组件：

import Vue from "vue";
import nodeRenderer from "./RenderNode";

const DetailConstructor = Vue.extend(nodeRenderer);

export default {
  props: {
    fullText: "",
  },
  mounted() {
    // 解决方案 1
    const detailRenderer = new DetailConstructor({
      propsData: {
        node: this.$slots.default,
      },
    });
    console.log(detailRenderer.$mount(), detailRenderer.$el.outerHTML); // $el 是 DOM 对象，可进行任意操作

    // 解决方案 2
    const slot = this.$slots.default[0];
    console.log(slot.context.$mount(), slot.context.$el.innerHTML);
  },
};

解决方案：问题 2：插入 VNode 数组

获取到 DOM 后，可以使用 DOM API 将 VNode 数组插入到指定的元素中。

// ...

mounted() {
  // ...

  // 获取 DOM 节点
  const el = this.$refs.fullText;

  // 清空元素内容
  el.innerHTML = "";

  // 插入 VNode 数组
  this.$slots.default.forEach((vnode) => {
    el.appendChild(vnode.elm);
  });
}

以上就是Vue.js 2 中如何将 VNode 数组插入到指定元素？的详细内容，更多请关注其它相关文章！