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();
        },
      });