vue h函数参数

摘要

在 Vue 中，h 函数是用于创建虚拟 DOM（Virtual DOM）元素的辅助函数，它是 Vue.createElement 的别名。通常在编写自定义渲染函数时会使用 h 函数。h 函数接受三个参数：

参数一：标签名称或组件选项对象。

如果传递一个字符串作为参数，表示创建一个具有该标签名称的 HTML 元素，例如 'div'、'span'。
如果传递一个组件选项对象作为参数，表示创建一个该组件的实例。

参数二：可选的属性对象或数据对象。

如果传递一个对象作为参数，表示设置该元素的属性和特性。
如果传递一个数据对象作为参数，则可以在后续的参数中访问这个数据对象，例如在插槽中使用。

参数三：可选的子节点。

可以传递一个数组作为参数，其中包含要添加为子节点的其他虚拟 DOM 元素。
也可以直接传递单个虚拟 DOM 元素。
示例代码如下所示：

// 创建一个具有文字内容的 div 元素
const myElement = h('div', 'Hello, world!');
// 创建一个具有行内属性和文字内容的 div 元素
const myElementAttributes = h('div', {
      class: 'my-class',
      style: 'color: red;'
    },
    'Hello, world!'
    );

// 创建一个具有属性和子节点的 div 元素
const myElementWithAttributes = h('div', {
  class: 'my-class',
  style: 'color: red;'
}, [
  h('span', 'I am a child element')
]);

// 创建一个组件实例
const myComponent = h(MyComponent, {
  props: {
    message: 'Hello'
  }
});

注意：h 函数通常用于更灵活的自定义渲染或在非 Vue 生态系统中使用 Vue。