vue2，vue3自定义事件，原生dom事件

在 Vue 2 和 Vue 3 中，自定义事件的实现方式和原生 DOM 事件的绑定与触发存在一些差异。以下是对这两种版本中相关机制的详细说明。 ### 自定义事件的实现方式 #### Vue 2 在 Vue 2 中，子组件可以通过 `$emit` 方法向父组件发射自定义事件。该方法的第一个参数是事件名称，后续参数是传递给父组件的数据[^1]。例如，在子组件中，可以这样定义一个按钮点击事件： ```html <template> <button @click="$emit('toParent', 'CustomChild的emit事件')">子组件向父组件发射事件</button> </template> ``` 在父组件中，监听这个自定义事件并处理数据： ```html <template> <div> <custom-child @to-parent="handleToParent" /> </div> </template> <script> export default { methods: { handleToParent(data) { console.log('Received data:', data); } } } </script> ``` #### Vue 3 在 Vue 3 中，使用 `defineEmits` 函数来定义和触发自定义事件。`defineEmits` 返回一个函数，用于触发事件并传递参数[^2]。例如，在子组件中，可以这样定义一个按钮点击事件： ```html <script setup> let $emits = defineEmits(['xxx']) const clickButton = ($event) => { // 第一个参数为事件类型，后面为参数 $emits('xxx', 'child1', $event) } </script> <template> <button @click="clickButton">我是子组件</button> </template> ``` 在父组件中，监听这个自定义事件并处理数据： ```html <template> <div> <custom-child @xxx="handleXxx" /> </div> </template> <script setup> const handleXxx = (data) => { console.log('Received data:', data); } </script> ``` ### 原生 DOM 事件的绑定与触发 #### Vue 2 在 Vue 2 中，可以通过 `.native` 修饰符将事件绑定到原生 DOM 元素上。例如，如果需要在一个组件的根元素上绑定一个原生的 `click` 事件，可以这样做： ```html <template> <my-component @click.native="handleNativeClick" /> </template> ``` #### Vue 3 在 Vue 3 中，不再需要使用 `.native` 修饰符，因为默认情况下，所有未被声明为 props 的属性都会自动绑定到组件的根元素上。这意味着可以直接在组件上绑定原生事件，而不需要额外的修饰符： ```html <template> <my-component @click="handleNativeClick" /> </template> ``` ###