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