Vue3 在template中渲染vnode

作者: 般犀 | 来源:发表于2022-10-23 23:07 被阅读0次

Vue3 在template中渲染vnode
vue渲染函数template与render区别
四。插槽，Attribute 继承
v-for中的key的作用（二）
【vue3源码】十一、初始vue3中的渲染器
vue3+ts获取组件Type-safe ref 实例
tempo优化系列: 从0开始(渲染)
vue 虚拟dom
数据驱动渲染(二)
认识vue虚拟DOM（二）

遇到一个功能点，需要遍历<slot>中传入的vnode，在每个vnode外面套个div再渲染出来。找了半天怎么用<template>把vnode渲染出来。

// 父组件
<template>
  <child-component>
     <div>1</div>
     <div>2</div>
  <child-component>
</template>

// 子组件
<script setup>
import { useSlots } from 'vue';
const slots = useSlots();
const children = ref([]);
if (slots.default) {
  children.value = slots.default();
}
</script>
<template>
  <div>
    <div v-for="(child, index) in children" :key="index">
      <component :is="child"></component> // 重点是这里
    </div>
  </div>
</template>

参考文章：
https://stackoverflow.com/questions/49352525/can-you-render-vnodes-in-a-vue-template
https://segmentfault.com/q/1010000020205251

Vue3 在template中渲染vnode
遇到一个功能点，需要遍历中传入的vnode，在每个vnode外面套个div再渲染出来。找了半天怎么用
vue渲染函数template与render区别
template与render都是渲染函数，都要经过编译，其最终作用都是为了生成虚拟节点VNode。 templa...
四。插槽，Attribute 继承
插槽在Vue3中，用template标签包裹要填充的内容，v-slot属性也需定义在template标签上，只有...
v-for中的key的作用（二）
一. VNode div，body等标签渲染到浏览器中的是真实节点VNode，虚拟节点，存在于内存中的JavaSc...
【vue3源码】十一、初始vue3中的渲染器
【vue3源码】十一、初始vue3中的渲染器在介绍渲染器之前。我们先简单了解下渲染器的作用是什么。渲染器最主要的...
vue3+ts获取组件Type-safe ref 实例
在 vue3 中获取组件的类型：在template中获取组件的ref tsx等render组件中获取的方式更简单...
tempo优化系列: 从0开始(渲染)
首先把渲染的架子搭出来我们假设有一个组件组件的产出一定是vnode 这里把vnode渲染成真实DOM，我这里用r...
vue 虚拟dom
vnode => dom虚拟 => 真是dom (vue 初始化渲染) 更新节点
数据驱动渲染(二)
回忆这里我们将对render函数把template转化成vnode的过程进行介绍。 Vue.prototype....
认识vue虚拟DOM（二）
什么是vnode 在vue中，存在一个VNode类，使用它可以实例化不同类型的vnode实例，不同类型的vnode...