在 Vue 3 中，h 函數(shù)是一個(gè)非常核心的概念，特別是在使用組合式 API (Composition API) 時(shí)。h 函數(shù)實(shí)際上是 Vue 的一個(gè)渲染函數(shù)，用于在組件中手動(dòng)創(chuàng)建虛擬節(jié)點(diǎn)（VNodes）。這對(duì)于編寫可重用和高性能的組件非常有用，尤其是在需要?jiǎng)討B(tài)生成大量元素時(shí)。

h 函數(shù)的基本用法

h 函數(shù)的全名是 createElement，它是 Vue 3 中 render 函數(shù)的一部分。在 Vue 2 中，我們通常通過(guò) this.$createElement 來(lái)訪問(wèn)這個(gè)功能，但在 Vue 3 中，我們直接使用 h 函數(shù)。

參數(shù)

h 函數(shù)接受三個(gè)參數(shù)：

• 類型（Type）：這是一個(gè)字符串或組件對(duì)象，表示要?jiǎng)?chuàng)建的元素的類型。例如，'div' 或 'span'，或者是一個(gè) Vue 組件。
• 屬性（Props）：一個(gè)對(duì)象，包含元素的屬性和事件監(jiān)聽(tīng)器等。例如，{ class: 'my-class', onClick: () => {} }。
• 子節(jié)點(diǎn)（Children）：子節(jié)點(diǎn)可以是一個(gè)字符串、一個(gè)數(shù)組或者多個(gè)參數(shù)。如果子節(jié)點(diǎn)是數(shù)組，則每個(gè)元素都是一個(gè)虛擬節(jié)點(diǎn)。

正文開始

在 Vue 3 中，h 方法是一個(gè)用于創(chuàng)建虛擬 DOM 節(jié)點(diǎn)的函數(shù)，它是創(chuàng)建渲染函數(shù)的核心工具。

一、引入 h 方法

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

二、語(yǔ)法

h(type, props?, children?)

1. type

必填參數(shù)，表示要?jiǎng)?chuàng)建的節(jié)點(diǎn)類型。

字符串：表示 HTML 標(biāo)簽名，如 'div'、'span'、'p' 等。
組件對(duì)象：可以是一個(gè)普通的 Vue 組件對(duì)象。
異步組件：使用 defineAsyncComponent 定義的異步組件。
函數(shù)式組件：一個(gè)返回虛擬 DOM 節(jié)點(diǎn)的函數(shù)。

2. props

可選參數(shù)，是一個(gè)對(duì)象，包含要傳遞給節(jié)點(diǎn)的屬性、特性和事件監(jiān)聽(tīng)器。

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

3. children

可選參數(shù)，表示節(jié)點(diǎn)的子節(jié)點(diǎn)。

字符串：表示文本節(jié)點(diǎn)。
數(shù)組：數(shù)組中的每個(gè)元素可以是另一個(gè) h 調(diào)用的結(jié)果，或者是字符串、數(shù)字等。
插槽對(duì)象：用于傳遞插槽內(nèi)容。

三、示例

1. 創(chuàng)建簡(jiǎn)單的 HTML 元素

import { h } from "vue";
const MyComponent = {
  render() {
    // 創(chuàng)建一個(gè) div 元素，包含文本內(nèi)容
    return h("div", "This is a simple div");
  },
};

2. 創(chuàng)建帶有屬性的 HTML 元素

import { h } from "vue";
const MyComponent = {
  render() {
    // 創(chuàng)建一個(gè)帶有屬性的 a 元素
    return h(
      "a",
      {
        href: "https://www.example.com",
        target: "_blank",
      },
      "Visit Example.com"
    );
  },
};

3. 創(chuàng)建嵌套的 HTML 元素

import { h } from "vue";
const MyComponent = {
  render() {
    // 創(chuàng)建一個(gè)嵌套的結(jié)構(gòu)：div 包含一個(gè) p 元素
    return h("div", [h("p", "This is a paragraph inside a div")]);
  },
};

4. 創(chuàng)建自定義組件

import { h } from "vue";
// 定義一個(gè)自定義組件
const MyCustomComponent = {
  props: ["message"],
  render() {
    return h("p", this.message);
  },
};
const ParentComponent = {
  render() {
    // 使用 h 方法創(chuàng)建自定義組件實(shí)例
    return h(MyCustomComponent, { message: "Hello from custom component" });
  },
};

到此這篇關(guān)于Vue 3 中 h 方法詳解的文章就介紹到這了,更多相關(guān)Vue 3 h 方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論