vue3 h函数的使用

使用说明

h函数返回一个虚拟节点即虚拟DOM

render() {
  return h('h1', {}, 'Some title')
}

接收 type,props,children 三个参数

• type：String | Object | Function （必填项）
  String：即html标签，‘button’，‘span’
  Object：组件（比如使用第三方UI库）
  Function：函数式组件

• props:Object
  在函数式组件中，props又被分为Props和Context，组件中声明props值，才会被放到Props对象中，否则全部被放到context中， context又包括attr 标签属性，emits，slot

• children：String | Array | Object

实践

import { h } from "vue";
const DynamicTemplate = (props, context) => {
  return h(
    props.label,
    { ...context.attrs.config, ...context.attrs.event },
    context.slots
  );
};

DynamicTemplate.props = ["label"];

export default DynamicTemplate;

<template>
  <DynamicTemplate
    :label="i.template.label"
    :config="i.template.attrConfig"
    :event="i.template.event(scope)"
  >
    {{ i.template.text }}
 </DynamicTemplate>
 </template>

import { ElButton } from "element-plus";
{
	template: {
      label: ElButton,
      text: "查看",
      attrConfig: {
        type: "text",
        disabled: true,
      },
      event(params) {
        return {
          onClick($event) {
            console.log($event);
            console.log(params);
          },
        };
      },
    }
}