vue3碰到就触发事件

在Vue 3中，可以使用v-on指令来绑定事件。v-on指令可以监听DOM事件、自定义事件以及组件事件。当指定的事件触发时，相应的方法将被调用。

以下是在Vue 3中触发事件的几种方式：

1. 监听DOM事件：
可以使用v-on指令来监听DOM事件，例如点击事件（click）、输入事件（input）等。在模板中使用v-on指令，并指定要监听的事件和对应的方法即可。

示例代码：

   <template>
     <button v-on:click="handleClick">点击触发事件</button>
   </template>

   <script>
   export default {
     methods: {
       handleClick() {
         // 处理点击事件的逻辑
       }
     }
   }
   </script>

2. 触发自定义事件：
在Vue 3中，可以使用`$emit`方法来触发自定义事件。在组件中定义一个方法，并在需要的地方调用`$emit`方法来触发该自定义事件。

示例代码：

   <template>
     <button @click="handleClick">点击触发自定义事件</button>
   </template>

   <script>
   export default {
     methods: {
       handleClick() {
         this.$emit('custom-event', data);
       }
     }
   }
   </script>

3. 组件间通信：
在Vue 3中，可以使用`provide`和`inject`来实现组件间的通信。通过在父组件中使用`provide`提供数据，然后在子组件中使用`inject`来注入这些数据，从而实现父子组件之间的事件触发。

示例代码：

   // 父组件
   <template>
     <button @click="handleClick">点击触发事件</button>
     <child-component></child-component>
   </template>

   <script>
   import { provide } from 'vue';
   import ChildComponent from './ChildComponent.vue';

   export default {
     components: {
       ChildComponent
     },
     methods: {
       handleClick() {
         // 触发事件
         provide('event', data);
       }
     }
   }
   </script>

   // 子组件
   <template>
     <div>{{ eventData }}</div>
   </template>

   <script>
   import { inject } from 'vue';

   export default {
     setup() {
       const eventData = inject('event');
       return {
         eventData
       };
     }
   }
   </script>