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

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

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

參數(shù)

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

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

正文開始

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

一、引入 h 方法

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

二、語法

h(type, props?, children?)

1. type

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

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

2. props

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

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

3. children

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

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

三、示例

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

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

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

import { h } from "vue";
const MyComponent = {
  render() {
    // 創(chuàng)建一個帶有屬性的 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)建一個嵌套的結(jié)構(gòu)：div 包含一個 p 元素
    return h("div", [h("p", "This is a paragraph inside a div")]);
  },
};

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

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

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

最新評論