渲染函数h()实例

?App.vue

<script setup lang="ts">
import MyButton from "./MyButton"

const onClick = () => {
  console.log("onClick")
}

</script>

<template>
  <MyButton :disabled="false" @custom-click="onClick">
    my button
  </MyButton>
</template>

MyButton.ts

import { defineComponent,h } from "vue"

export default defineComponent({
  name: 'MyButton',
  props: {
    disabled: Boolean,
  },
  emit: ['custom-click'],
  render() {
    return h('button',{ disabled: this.disabled , onClick: ()=>{
      this.$emit('custom-click')
    }},this.$slots)
  }
})

或者setup写法

import { defineComponent, h } from 'vue';

export default defineComponent({
  name: 'MyButton',
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['custom-click'],
  setup(props, { emit, slots }) {
    return () =>
      h(
        'button',
        {
          disabled: props.disabled,
          onClick: () => emit('custom-click'),
        },
        slots.default?.()
      );
  },
});