Vue 3 中 h 方法示例详解

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

h(type, props?, children?)

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

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

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

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

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" });
  },
};