首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 3 h 方法

Vue 3 中 h 方法示例详解

2025-03-10 10:57:18 作者：yqcoder

Vue3中的h方法用于创建虚拟DOM节点,是渲染函数的核心,它接受三个参数：type（节点类型）、props（属性对象）和children（子节点）,通过示例展示了如何使用h方法创建简单的HTML元素、带有属性的元素、嵌套元素和自定义组件,感兴趣的朋友一起看看吧

在 Vue 3 中，h 函数是一个非常核心的概念，特别是在使用组合式 API (Composition API) 时。h 函数实际上是 Vue 的一个渲染函数，用于在组件中手动创建虚拟节点（VNodes）。这对于编写可重用和高性能的组件非常有用，尤其是在需要动态生成大量元素时。

h 函数的基本用法

h 函数的全名是 createElement，它是 Vue 3 中 render 函数的一部分。在 Vue 2 中，我们通常通过 this.$createElement 来访问这个功能，但在 Vue 3 中，我们直接使用 h 函数。

参数

h 函数接受三个参数：

类型（Type）：这是一个字符串或组件对象，表示要创建的元素的类型。例如，'div' 或 'span'，或者是一个 Vue 组件。
属性（Props）：一个对象，包含元素的属性和事件监听器等。例如，{ class: 'my-class', onClick: () => {} }。
子节点（Children）：子节点可以是一个字符串、一个数组或者多个参数。如果子节点是数组，则每个元素都是一个虚拟节点。

正文开始

在 Vue 3 中，h 方法是一个用于创建虚拟 DOM 节点的函数，它是创建渲染函数的核心工具。

一、引入 h 方法

import { h } from "vue";
const MyComponent = {
  render() {
    return h("div", "Hello, Vue 3!");
  },
};

二、语法

h(type, props?, children?)

1. type

必填参数，表示要创建的节点类型。

字符串：表示 HTML 标签名，如 'div'、'span'、'p' 等。
组件对象：可以是一个普通的 Vue 组件对象。
异步组件：使用 defineAsyncComponent 定义的异步组件。
函数式组件：一个返回虚拟 DOM 节点的函数。

2. props

可选参数，是一个对象，包含要传递给节点的属性、特性和事件监听器。

h("input", {
  type: "text",
  placeholder: "Enter your name",
  onInput: (event) => console.log(event.target.value),
});

3. children

可选参数，表示节点的子节点。

字符串：表示文本节点。
数组：数组中的每个元素可以是另一个 h 调用的结果，或者是字符串、数字等。
插槽对象：用于传递插槽内容。

三、示例

1. 创建简单的 HTML 元素

import { h } from "vue";
const MyComponent = {
  render() {
    // 创建一个 div 元素，包含文本内容
    return h("div", "This is a simple div");
  },
};

2. 创建带有属性的 HTML 元素

import { h } from "vue";
const MyComponent = {
  render() {
    // 创建一个带有属性的 a 元素
    return h(
      "a",
      {
        href: "https://www.example.com",
        target: "_blank",
      },
      "Visit Example.com"
    );
  },
};

3. 创建嵌套的 HTML 元素

import { h } from "vue";
const MyComponent = {
  render() {
    // 创建一个嵌套的结构：div 包含一个 p 元素
    return h("div", [h("p", "This is a paragraph inside a div")]);
  },
};

4. 创建自定义组件

import { h } from "vue";
// 定义一个自定义组件
const MyCustomComponent = {
  props: ["message"],
  render() {
    return h("p", this.message);
  },
};
const ParentComponent = {
  render() {
    // 使用 h 方法创建自定义组件实例
    return h(MyCustomComponent, { message: "Hello from custom component" });
  },
};

到此这篇关于Vue 3 中 h 方法详解的文章就介绍到这了,更多相关Vue 3 h 方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！