Vue3中h函数超详细教程(附示例与应用场景)

h(
  type,          // string | Component | object
  props?,        // object | null
  children?      // string | array | object | function
)

import { h } from 'vue'

export default {
  render() {
    return h('div', { class: 'hello' }, 'Hello World')
  }
}

<template>
  <div class="hello">Hello World</div>
</template>

export default {
  render() {
    return h('div', { class: 'wrapper' }, [
      h('h2', '标题'),
      h('p', '段落内容'),
      h('button', { onClick: this.handleClick }, '点击')
    ])
  },
  methods: {
    handleClick() {
      alert('点击了按钮！')
    }
  }
}

import { h } from 'vue'
import MyButton from './MyButton.vue'

export default {
  render() {
    return h(MyButton, { type: 'primary', onClick: this.doSomething }, {
      default: () => '点我'
    })
  },
  methods: {
    doSomething() {
      console.log('点击按钮！')
    }
  }
}

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => (
      <div class="box">
        <p>Hello JSX</p>
      </div>
    )
  }
})

import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [vueJsx()]
}

render() {
  return h('el-table-column', {
    prop: 'name',
    label: '姓名',
    scopedSlots: {
      default: (scope) => h('span', scope.row.name)
    }
  })
}

render() {
  return h(ElTableColumn, { prop: 'name', label: '姓名' }, {
    default: ({ row }) => h('span', row.name)
  })
}

render() {
  return h(MyComponent, {}, {
    default: () => '默认插槽内容',
    header: () => h('h1', '头部插槽')
  })
}

function h(
  type: string | Component,
  props?: object | null,
  children?: string | VNode[] | () => VNode
): VNode

import { h } from 'vue'