vue怎么把h()放到template中渲染出来？

  • Z时代
  • 2024-02-14
  • 分类：IT

Vue 提供了一个 h() 函数用于创建 vnodes：

import { h } from 'vue'
const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

回答：

没法直接用，只能写个组件去接收render

回答：

你可以想象成 document.createElement ，只不过 h 内部还会处理原生标签和 Vue 组件。

并且可以把属性，方法一类的做赋值。

最后就是可以递归生成 children 上的。

本质上 h 可以理解为生成一个 VNode, document.createElement 是真实 DOM。

具体的源码可以上 github 上去看

具体的你可以当 slot 或者 component 来使用，可以参考 elementui 的 messageBox 组件。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

回答：

我用的是vue3.0 的setup语法糖
import {h, render} from 'vue'

const renderData = () => {
// 创建虚拟节点
const vNode = h(...)
// 创建外层容器，存放虚拟DOM vNode
const dom = document.createElement('div');

document.querySelector('.要放入的容器名')?.appendChild(dom);
// 调用render函数渲染到页面
render(vNode, dom);
}
onMounted(() => {

renderData()

})
可以实现在template中局部render渲染

回答：

也可以用动态组件来实现，例如

<template>
    <component :is="h('span', '测试')"/>
</template>

以上是 vue怎么把h()放到template中渲染出来？ 的全部内容， 来源链接： utcz.com/p/932817.html

回到顶部