vue中h函数的使用

1. h() 函数是一个用于创建 vnode，其实在vue中是createVNode 函数的简写
   h()函数接受三个参数
   参数1. 标签名或组件   参数2. 标签的属性或事件  参数3. 内容
使用：

// 单个
import {h} from 'vue'
export default {
  render() {
    return  h("span",{class:"name"},"h函数的使用")
  },
} 
// 多个

export default {

  render() {
    return h("div",null,[
      h("div",null,"div111"),
      h("span",{class:"name"},"h函数的使用")
    ])
  },
} 

// 组件中使用

import header from './header.vue'
import {h} from 'vue'
export default {
name: 'home',
  render() {
    return  h(header,null,
    {
      default: props=>h("span",null,`"我是home传给header的具名插槽"+${props.name}`) //default就是插槽的名字
    }
  )
 },
} 

// header组件
import {h} from 'vue'
export default {
  render() {
    return h("div",null,[
      h("h2",null,"header"),
      this.$slots.default?this.$slots.default({name:'test'}):h("h2",null,"pppppp"),
    ])
  },
} 

//  dialog中使用

      const confirmDia = DialogPlugin({
        header: '【我来测试弹窗】',
        theme: 'info',
        closeOnOverlayClick: false,
        body: (h) => {
          return h(
            'div',
            { class: 'dialog-body-main', style: 'color:red;line-height:26px' },
            `1、我来测试发射点犯得上发生发达发达算法的`,
            h('br'),
            `2、第二行数据发达发达省份打饭打水发达发达`,
            h('br'),
            `注：更多可详见邮件`,
          );
        },
        confirmBtn: '确定',
        cancelBtn: null,
        onConfirm: () => {
          confirmDia.hide();
        },
        onClose: () => {
          confirmDia.hide();
        },
      });

 

          DialogPlugin({

            header: '高危操作',

            body: (h) => {

              return h(

                'div',

                { class: 'dialog-body-main', style: 'line-height:26px' },

                h('div', '高危操作请审批，该审批自创建时间起7日有效：'),

                h(

                  'a',

                  { href: 'https://www.baidu.com', style: 'text-decoration: none;color: #0052d9' },

                  'https://www.baidu.com',

                ),

              );

            },

            theme: 'danger',

            confirmBtn: null,

            cancelBtn: null,

          });

        

if (Number(status) === 302) {

  const confirmDia = DialogPlugin({

    header: '提示',

    body: (h) => {

      return h(

        'div',

        { class: 'dialog-body-main', style: 'line-height:26px' },

        h('span', '无角色权限，请在'),

        h(

          'a',

          {

            href: 'https://www.baidu.com',

            style: 'text-decoration: none;color: #0052d9',

          },

          'power系统',

        ),

        h('span', '申请角色'),

      );

    },

    theme: 'info',

    confirmBtn: '确定',

    cancelBtn: null,

    closeBtn: null,

    onConfirm: () => {

      location.href = 'https://www.baidu.com';

      confirmDia.hide();

    },

  });

}