vue h 函数

作者：忽然之间发布日期:2026-07-06 浏览:31

// 使用 h 函数创建 Vue 组件的示例代码

// 引入 Vue 和 h 函数
import { createApp, h } from 'vue'

// 创建一个简单的组件使用 h 函数
const MyComponent = {
  render() {
    // 使用 h 函数创建虚拟 DOM 节点
    return h('div', { class: 'my-component' }, [
      h('h1', null, 'Hello Vue!'),
      h('p', null, 'This is a component created using the h function.')
    ])
  }
}

// 创建 Vue 应用并挂载组件
const app = createApp({
  render() {
    return h(MyComponent)
  }
})

app.mount('#app')

解释说明：

h 函数是 Vue 的低级 API，用于创建虚拟 DOM 节点。
在 render 函数中，h 函数的第一个参数是标签名或组件，第二个参数是属性对象，第三个参数是子节点（可以是字符串或数组）。
上述代码展示了如何使用 h 函数创建一个简单的 Vue 组件，并将其挂载到页面上。

上一篇：vue2 component

下一篇：vue :deep