插入 vnode 数组到 vue.js 组件中的元素
在 Vue.js 2 中，可以通过使用 $slots.default 来获取一个 VNode 数组。问题是如何将此数组插入到组件某个特定元素中。
获取 DOM InnerHTML
方案 1：使用 RenderNode 组件
创建一个自定义组件 RenderNode，该组件将 VNode 作为参数并渲染它。通过使用该组件，可以获取完整的 DOM 节点，从而获取其 outerHTML：
立即学习“前端免费学习笔记（深入）”；
<script>
// RenderNode.js
export default {
props: ['node'],
render(h, context) {
return this.node ? this.node : ''
}
}
</script>
// 主组件
<script>
import RenderNode from './RenderNode'
export default {
props: {
fullText: "",
},
mounted() {
const detailRenderer = new RenderNode({
propsData: {
node: this.$slots.default,
},
});
console.log(detailRenderer.$mount(), detailRenderer.$el.outerHTML);
},
};
</script>方案 2：直接获取 slot 的 DOM
获取组件 slot 的 DOM，仅限于获取 slot 的后代：
// 主组件
<script>
export default {
props: {
fullText: "",
},
mounted() {
const slot = this.$slots.default[0];
console.log(slot.context.$mount(), slot.context.$el.innerHTML);
},
};
</script>插入 VNode 数组
获取到 DOM 节点后，可以通过以下方式将其插入到组件的特定元素中：
- 使用 insertBefore() 或 appendChild() 方法插入到现有节点中
- 使用 innerHTML 直接覆盖元素内容
