关于Vue2组件适配迁移到Vue3的坑（持续更新）

最新推荐文章于 2025-07-11 20:38:16 发布

原创最新推荐文章于 2025-07-11 20:38:16 发布 · 711 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

前端开发同时被 3 个专栏收录

21 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

6 篇文章

订阅专栏

本文探讨了Vue2和Vue3中事件处理的差异。在Vue2中，子组件的事件需要手动$emit触发才能传递到父组件，而Vue3通过Composition API改进了这一机制，允许父组件直接监听子组件的点击事件，避免了方法的重复触发。对于迁移Vue2项目至Vue3的开发者，这是一个需要注意的变更。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@click触发的逻辑有修改

vue2中的子组件默认不会冒泡到父组件，所以类似于@click的方法需要在子组件内被手动返回，vue3中修复了这个bug，vue2组件的这部分需要被修改下

// vue 2中

// 子组件
<template>
    <div @click="testClick">
        ...
    </div>
</template>

<script>
    ...
    methods: {
        testClick () {
            this.$emit('click')
        }
    }
</script>


//父组件
<template>
    <子组件 @click="test">点击</子组件>
</template>





/** vue2 需要这种方式才可以在父组件内触发点击子组件的方法 其他onXXXX方法同理*/

而在vue3中copmsition api写法不需要在子组件返回子组件事件，直接在父组件正常@click即可，否则会重复触发两次绑定的方法