vue3中h函数的常用使用方式汇总

下面是“vue3中h函数的常用使用方式汇总”的完整攻略。

简介

在Vue3中，我们可以使用h函数来手动编写渲染函数，动态生成虚拟DOM。h函数实际上是createElement函数的别名，调用前需要先导入。

基本使用

h函数可以通过传入元素的标签名、属性和子节点来创建element。

import { h } from 'vue';

const vnode = h('div', { class: 'example' }, 'Hello, World!');
console.log(vnode);
// Output: { type: "div", props: { class: "example" }, children: "Hello, World!" }

上面的代码生成了一个div元素，它有一个class名为example，子节点为“Hello, World!”。通过调用console.log(vnode)展示了生成的vnode对象。

子节点

子节点可以是一个字符串、一个数组或一个嵌套h函数，也可以是一个组件。

以下是一个字符串作为子节点的例子：

import { h } from 'vue';

const vnode = h('div', 'Hello, World!');
console.log(vnode);
// Output: { type: "div", props: {}, children: "Hello, World!" }

以下是一个数组作为子节点的例子：

import { h } from 'vue';

const vnode = h('ul', [
  h('li', 'Item 1'),
  h('li', 'Item 2')
]);
console.log(vnode);
// Output: { type: "ul", props: {}, children: [{ type: "li", props: {}, children: "Item 1" }, { type: "li", props: {}, children: "Item 2" }] }

以下是一个组件作为子节点的例子：

import { h } from 'vue';
import MyComponent from './MyComponent.vue';

const vnode = h('div', [
  h(MyComponent, { prop1: 'value1', prop2: 'value2' })
]);
console.log(vnode);
// Output: { type: "div", props: {}, children: [{ type: MyComponent, props: { prop1: "value1", prop2: "value2" }, children: null }] }

属性

元素可以拥有属性，这些属性可以通过一个包含属性键和属性值的对象传递给h函数。

import { h } from 'vue';

const vnode = h('img', { src: 'image.jpg', alt: 'Image' });
console.log(vnode);
// Output: { type: "img", props: { src: "image.jpg", alt: "Image" }, children: null }

class和style

在Vue3中，我们可以使用class和style属性来设置元素的CSS类和行内样式。

以下是一个使用class属性的例子：

import { h } from 'vue';

const vnode = h('div', { class: ['container', 'bg-white'] });
console.log(vnode);
// Output: { type: "div", props: { class: ["container", "bg-white"] }, children: null }

以下是一个使用style属性的例子：

import { h } from 'vue';

const vnode = h('div', { style: { color: 'red', fontSize: '16px' } });
console.log(vnode);
// Output: { type: "div", props: { style: { color: "red", fontSize: "16px" }  }, children: null }

事件处理

在Vue3中，我们可以在h函数中为元素添加事件处理函数，只需将其作为一个on对象传递。

以下是一个添加事件处理函数的例子：

import { h } from 'vue';

function handleClick() {
  alert('Clicked!');
}

const vnode = h('button', { on: { click: handleClick } }, 'Click Me');
console.log(vnode);
// Output: { type: "button", props: { on: { click: handleClick } }, children: "Click Me" }

插槽

在Vue3中，我们可以在h函数中添加插槽，通过使用特殊键v-slot和具有template标签的子节点来实现。需要注意的是，插槽只能在组件中使用。

以下是一个插槽的例子：

import { h } from 'vue';

const vnode = h('my-component', {}, {
  default: () => h('p', 'Default Slot')
});
console.log(vnode);
// Output: { type: MyComponent, props: {}, slots: { default: [ƒ] }, children: null }