
插入 vnode 数组到 vue.js 组件中的元素
在 Vue.js 2 中,可以通过使用 $slots.default 来获取一个 VNode 数组。问题是如何将此数组插入到组件某个特定元素中。
获取 DOM InnerHTML
方案 1:使用 RenderNode 组件
创建一个自定义组件 RenderNode,该组件将 VNode 作为参数并渲染它。通过使用该组件,可以获取完整的 DOM 节点,从而获取其 outerHTML:
立即学习“前端免费学习笔记(深入)”;
// 主组件
方案 2:直接获取 slot 的 DOM
获取组件 slot 的 DOM,仅限于获取 slot 的后代:
// 主组件
插入 VNode 数组
获取到 DOM 节点后,可以通过以下方式将其插入到组件的特定元素中:
- 使用 insertBefore() 或 appendChild() 方法插入到现有节点中
- 使用 innerHTML 直接覆盖元素内容










