vue3 tsx 自定义事件

在Vue3中，可以使用TSX（TypeScript JSX）方式来定义自定义组件，并实现自定义事件。下面是一个简单的示例：

// MyComponent.tsx
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    value: {
      type: String,
      required: true
    }
  },
  emits: ['customEvent'],
  setup(props, { emit }) {
    const handleClick = () => {
      emit('customEvent', 'Custom event emitted');
    };

    return {
      handleClick
    };
  },
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        <p>{this.value}</p>
      </div>
    );
  }
});

在上面的示例中，我们定义了一个名为`MyComponent`的组件，它接受一个名为`value`的属性，并且通过`emits`选项声明了一个名为`customEvent`的自定义事件。在`setup`函数中，我们使用`emit`函数来触发`customEvent`事件，并传递了一个字符串作为参数。

在父组件中使用`MyComponent`组件，并监听`customEvent`事件：

// ParentComponent.vue
<template>
  <div>
    <MyComponent v-model="message" @customEvent="handleCustomEvent" />
  </div>
</template>

<script>
import { ref } from 'vue';
import MyComponent from './MyComponent';

export default {
  components: {
    MyComponent
  },
  setup() {
    const message = ref('');

    const handleCustomEvent = (eventMessage) => {
      console.log(eventMessage);
    };

    return {
      message,
      handleCustomEvent
    };
  }
};
</script>

在上面的示例中，我们在父组件中使用了`MyComponent`组件，并通过`v-model`指令绑定了`message`属性。同时，我们监听了`customEvent`事件，并在`handleCustomEvent`方法中打印了事件传递的消息。

这样，当在`MyComponent`组件中点击按钮时，会触发`customEvent`事件，并将消息传递给父组件，父组件会打印出该消息。