Vue中h函数的用法

啥都学点的程序员
224 阅读3分钟
  1. 基本概念
  • 在 Vue.js 中，h函数（hyperscript的缩写）用于创建虚拟 DOM（VNode）节点。它是createElement函数的简写形式，在使用渲染函数（render）创建组件时非常有用。通过h函数，可以手动构建组件的 DOM 结构，这种方式比使用模板语法更加灵活，尤其在需要动态创建组件或者对组件结构进行复杂的逻辑控制时。
  1. 基本用法

  • 创建简单元素：

    • h函数的基本语法是h(tagName, [props], [children])。例如，要创建一个简单的<div>元素，可以这样使用h函数：
import { h } from 'vue';
const vnode = h('div', { class: 'my - div' }, '这是一个div');

  • 在这个例子中，h函数的第一个参数'div'是标签名，第二个参数{ class: 'my - div' }是一个包含元素属性的对象（这里设置了class属性），第三个参数'这是一个div'是元素的子内容（可以是文本、其他 VNode 或者数组）。

  • 创建带有子元素的元素：

    • 如果要创建一个包含子元素的<div>，可以将子元素作为h函数的第三个参数传入。子元素可以是一个h函数创建的 VNode，也可以是一个 VNode 数组。例如：
import { h } from 'vue';
const childVnode = h('p', null, '这是一个段落');
const vnode = h('div', { class: 'parent - div' }, [childVnode]);

  • 这里首先创建了一个<p>元素的 VNodechildVnode，然后将其放入一个数组作为h函数创建<div>元素的第三个参数，这样就构建了一个包含段落元素的<div>的 VNode。

  1. 在组件渲染函数中使用
  • 在 Vue 组件的渲染函数（render）中，h函数用于返回组件的 VNode 结构。例如，创建一个简单的组件，返回一个包含标题和段落的<div>：
import { defineComponent, h } from 'vue';
export default defineComponent({
    render() {
        const titleVnode = h('h1', null, '组件标题');
        const paragraphVnode = h('p', null, '组件内容');
        return h('div', null, [titleVnode, paragraphVnode]);
    }
});

  • 这个组件的渲染函数使用h函数创建了标题和段落的 VNode，然后将它们组合在一个<div>的 VNode 中并返回。这样，当组件被渲染时，就会生成相应的 DOM 结构。

  1. 动态创建组件和属性

  • 动态标签名：

    • h函数的第一个参数可以是一个动态的变量。例如，可以根据组件的某个属性来决定创建的标签类型：
import { defineComponent, h } from 'vue';
export default defineComponent({
    props: {
        tagName: {
            type: String,
            default: 'div'
        }
    },
    render() {
        return h(this.tagName, null, '动态标签内容');
    }
});

  • 在这个组件中，tagName属性决定了h函数创建的标签类型。如果传入tagName为'span'，则会创建一个<span>元素；如果传入'div'，则会创建一个<div>元素。

  • 动态属性和事件绑定：

    • 第二个参数（属性对象）也可以是动态的。例如，可以根据组件的状态来决定是否添加某个属性或者绑定某个事件。假设要创建一个按钮，根据一个布尔属性来决定是否禁用它：
import { defineComponent, h } from 'vue';
export default defineComponent({
    props: {
        isDisabled: {
            type: Boolean,
            default: false
        }
    },
    render() {
        const buttonProps = {
            type: 'button',
            onClick: () => console.log('按钮被点击'),
        };
        if (this.isDisabled) {
            buttonProps.disabled = true;
        }
        return h('button', buttonProps, '按钮');
    }
});
  • 在这里，根据isDisabled属性的值来动态设置按钮的disabled属性。同时，也绑定了onClick事件，当按钮被点击时会在控制台打印消息。
avatar
文章
阅读
粉丝