Vue3使用h函数和render函数动态插入组件和元素
Vue3使用h函数和render函数动态插入组件和元素
·
首先明白两个函数的大致作用
- h函数(createVnode)用于创建一个虚拟DOM(用法可以自行查看文档);
- render函数用于输出虚拟DOM;在Vue是无法使用原生的方式将组件当做普通DOM动态加入到其他的DOM中,通过render函数的第二个参数指定需要挂载DOM
父组件代码片
。
// An highlighted block
<template>
<div class="home-box"></div>
</emplate>
<script setup>
import { ref, h,render,onMounted} from 'vue'
import Test from './Test.vue'
onMounted(() => {
//创建一个容器用于存放需要动态渲染的组件
let son = document.createElement('div')
//把容器插入到指定的位置
document
.querySelector('.home-box')
.insertBefore(son,document.querySelector('.home-box').firstChild)
//使用render函数把组件挂载到容器上
//第一个参数是我们使用h函数创造的VNode
//第二个参数是需要挂载的位置
render(h(Test),son)
})
Test组件内容
。
<template>
<el-button>{{ 0 }}</el-button>
<el-button>{{ 0 }}</el-button>
</template>
最后的效果
更多推荐
已为社区贡献1条内容
所有评论(0)