渲染函数h()实例

2023-12-21 01:34:38

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

文章来源:https://blog.csdn.net/content6/article/details/135088440
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。