Vue3子组件事件传递异常：列表项无法删除的问题排查

问题分析 #

你的代码存在两个关键错误，导致点击删除按钮无任何反应：

1. 子组件setup选项位置错误
   子组件的setup被嵌套在props对象内部，不符合Vue3组件选项的结构规范，导致setup函数根本没有执行，按钮绑定的onRemoveMember方法实际不存在，无法触发事件传递。

2. 父组件事件绑定方式错误
   父组件中@onRemoveMember="removeMember(member.id)"的写法会在组件渲染时立即执行removeMember方法，而非点击按钮时触发，这会导致页面初始化就错误删除数据，同时点击按钮时没有绑定正确的回调逻辑。

修正方案 #

1. 修正子组件结构，正确放置setup并传递id #

将setup移到与props、emits同级的位置，同时在emit时把当前成员的id传递给父组件：

<template>
  <b-avatar class="mr-3"></b-avatar>
  <span class="mr-auto">{{ model.name }}</span>
  <b-button @click="onRemoveMember">Удалить</b-button>
  <b-badge>{{ model.id }}</b-badge>
</template>

<script>
export default {
  emits: ["onRemoveMember"],
  props: {
    model: {
      default: {
        id: 0,
        avatar: "ava",
        name: "Blank",
      }
    }
  },
  // 将setup移至顶层选项，与props平级
  setup(props, { emit }) {
    const onRemoveMember = () => {
      // 传递当前成员的id给父组件
      emit("onRemoveMember", props.model.id);
    };
    return {
      onRemoveMember
    };
  },
}
</script>

2. 修正父组件事件绑定方式 #

直接绑定removeMember方法，让它接收子组件传递过来的id参数：

...
          <b-list-group-item
            class="d-flex align-items-center justify-content-md-between"
            v-for="member in memberList"
            :key="member.id"
          >
            <!-- 直接绑定方法名，避免渲染时立即执行 -->
            <member-card @onRemoveMember="removeMember" :model="member"></member-card>
          </b-list-group-item>
...

父组件的removeMember函数无需修改，它会自动接收子组件传递的id参数并执行列表过滤逻辑。

验证效果 #

修改后点击删除按钮，子组件会正确触发onRemoveMember事件并传递id，父组件接收到id后过滤列表，对应的成员会被移除，同时console.log(id)也会正常输出。

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