Vue中子组件点击按钮为对应父组件添加类的实现问题

问题场景 #

在Vue项目中，将子组件通过插槽嵌入父组件，需求是点击子组件内的按钮时，仅为对应的父组件实例添加类。现有父组件通过editMode属性控制类的添加，子组件点击时触发edit-abc事件，但因存在多个abc对象，当前editAbc函数逻辑错误，无法实现仅为点击项添加类。

错误原因 #

当前editAbc函数存在两个核心问题：

• 直接修改全局的editMode布尔值，会导致所有父组件实例的类同时被修改
• 使用filter遍历abcs的逻辑混乱，没有将点击事件与具体的abc项关联起来

修正方案 #

我们需要给每个父组件实例绑定对应的abc唯一标识（比如id），通过维护一个按id存储状态的对象来单独控制每个实例的编辑状态，具体修改如下：

1. 修改子组件：传递对应abc的id

子组件接收父级传递的abcId，点击时将该id作为事件参数emit出去：

<template>
  <button @click="addClass">Click Me!!!</button>
</template>

<script>
export default {
  props: ['abcId'],
  methods: {
    addClass() {
      this.$emit('edit-abc', this.abcId);
    }
  }
};
</script>

2. 修改组件使用逻辑：维护每个id的编辑状态

在循环渲染父组件的地方，用editIds对象存储每个abc的编辑状态，而非单个布尔值：

<template>
  <div>
    <parent-component 
      v-for="abc in abcs" 
      :key="abc.id"
      :edit-mode="!!editIds[abc.id]"
    >
      <template #default>
        <child-component 
          :abc-id="abc.id"
          @edit-abc="toggleEditMode" 
        />
      </template>
    </parent-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      abcs: [], // 你的abc数据数组
      editIds: {} // 存储各id的编辑状态，初始为空（默认false）
    };
  },
  methods: {
    toggleEditMode(abcId) {
      // 切换对应id的编辑状态，用$set确保响应式更新
      this.$set(this.editIds, abcId, !this.editIds[abcId]);
    }
  }
};
</script>

3. 父组件代码保持不变

父组件依然通过editMode属性控制类的添加，无需修改：

<template>
  <div :class="editMode ? 'class-add' : ''">
    <slot name="default"></slot>
  </div>
</template>
    
<script>
export default {
  props: {
    editMode: {
      type: Boolean,
      required: true,
    },
  },
};
</script>

原理说明 #

每个父组件实例对应唯一的abc.id，点击子组件时传递该id，父级通过editIds对象单独管理每个id的编辑状态，这样就只会给点击对应的父组件实例添加class-add类，不会影响其他实例。

内容的提问来源于stack exchange，提问作者World's famous people