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

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《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 数组插入到指定元素？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！