vue3自定义事件写法setup

在Vue 3中，自定义事件的写法有些不同于Vue 2。下面是Vue 3中自定义事件的常见写法：

1. 使用`$emit`方法触发自定义事件：
在父组件中，可以使用`$emit`方法触发自定义事件，并传递参数。例如：

   <template>
     <button @click="handleButtonClick">点击触发自定义事件</button>
   </template>
   
   <script>
   export default {
     methods: {
       handleButtonClick() {
         this.$emit('my-event', '自定义参数');
       }
     }
   };
   </script>

在子组件中，可以通过`v-on`指令监听并响应自定义事件。例如：

   <template>
     <div>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script>
   export default {
     props: ['message'],
     mounted() {
       this.$parent.$on('my-event', this.handleMyEvent);
     },
     methods: {
       handleMyEvent(payload) {
         console.log(payload); // 输出：自定义参数
       }
     }
   };
   </script>

2. 使用`provide/inject`提供和注入自定义事件：
在父组件中，可以使用`provide`方法提供一个自定义事件的回调函数。例如：

   <template>
     <button @click="handleButtonClick">点击触发自定义事件</button>
     <child-component></child-component>
   </template>
   
   <script>
   import { provide } from 'vue';
   
   export default {
     setup() {
       const handleMyEvent = (payload) => {
         console.log(payload); // 输出：自定义参数
       };
   
       const handleButtonClick = () => {
         handleMyEvent('自定义参数');
       };
   
       provide('my-event', handleMyEvent);
   
       return {
         handleButtonClick
       };
     }
   };
   </script>

在子组件中，可以使用`inject`方法注入父组件提供的自定义事件。例如：

   <template>
     <div>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script>
   import { inject } from 'vue';
   
   export default {
     setup() {
       const handleMyEvent = inject('my-event');
   
       return {
         message: handleMyEvent ? handleMyEvent('自定义参数') : ''
       };
     }
   };
   </script>

这是Vue 3中常见的自定义事件写法。希望可以帮助到你！