transition-group阻断子组件emit向上传递问题求助

问题根源 #

你遇到的问题是因为transition-group是Cart组件的直接子元素，CartItem的$parent指向的是transition-group实例而非Cart组件，所以通过$parent.$emit发出的事件被transition-group拦截，无法传递到Cart及更上层的App组件。

解决方案（推荐） #

采用组件间显式事件传递的方式，不依赖$parent这种隐式关联，更符合Vue的组件设计规范：

1. 修改CartItem.vue，直接向父组件emit事件

<template>
    <li class="cart-item d-flex justify-content-between align-items-center mb-2">
        {{ item.name }} {{ item.id }}
        <!-- 直接emit事件，无需依赖$parent -->
        <button @click="$emit('do-staff', item.id)">doStaff</button>
    </li>
</template>

2. 在Cart.vue中监听CartItem的事件，并向上转发到App组件

<template>
   <div class="userCart">
     <transition-group tag="ul">
       <cart-item 
         v-for="item in userCart" 
         :key="item.id" 
         :item="item"
         <!-- 监听CartItem的事件，再向上emit -->
         @do-staff="$emit('doStaff', $event)"
       ></cart-item>
     </transition-group>
   </div>
</template>

如果需要在Cart组件中做额外处理，也可以通过方法中转：

<script>
import CartItem from './CartItem.vue';
export default{
    props:{
        userCart: Object
    },
    components:{
        CartItem
    },
    methods:{
        handleDoStaff(itemId) {
            // 可在此添加额外逻辑，比如数据校验、日志记录等
            this.$emit('doStaff', itemId)
        }
    },
}
</script>

<template>
   <div class="userCart">
     <transition-group tag="ul">
       <cart-item 
         v-for="item in userCart" 
         :key="item.id" 
         :item="item"
         @do-staff="handleDoStaff"
       ></cart-item>
     </transition-group>
   </div>
</template>

3. 在App.vue中正常监听Cart组件的doStaff事件即可
   示例：

<Cart :userCart="cartData" @do-staff="handleCartAction"></Cart>

为什么不推荐用$parent？ #

$parent依赖组件的DOM层级关系，一旦组件结构调整（比如添加/移除包裹元素）就会失效，而显式事件传递是组件间的约定，更稳定、易维护。

内容的提问来源于stack exchange，提问作者Andrew