Vue2如何通过方法参数修改对象属性并传递给子组件Props

核心思路 #

通过传递属性名字符串动态指定要修改的requests属性，同时携带item参数，完全避免冗余的if/else判断。

实现步骤 #

1. 父组件定义方法与数据

父组件中维护requests对象，同时编写可接收多参数的makeRequest方法，通过$set（确保Vue响应式更新）动态修改对应属性：

export default {
  data() {
    return {
      requests: {
        deleteItem: false,
        editItem: false,
        // 其他布尔类型请求标识
      },
      currentItem: null // 用于存储传递的item参数
    };
  },
  methods: {
    makeRequest(propName, item) {
      // 动态设置目标属性为true
      this.$set(this.requests, propName, true);
      // 处理item参数，比如暂存供后续逻辑使用
      this.currentItem = item;
    }
  }
};

2. 父组件传递事件给子组件

在父组件模板中，通过自定义事件将makeRequest方法传递给子组件：

<dialog-child 
  :requests="requests" 
  @trigger-request="makeRequest"
></dialog-child>

3. 子组件触发事件并传递参数

子组件中，点击按钮时直接通过$emit传递属性名和item两个参数：

<template>
  <div>
    <button @click="$emit('trigger-request', 'deleteItem', currentItem)">删除</button>
    <button @click="$emit('trigger-request', 'editItem', currentItem)">编辑</button>
    <!-- 对话框绑定对应属性 -->
    <dialog v-model="requests.deleteItem">删除确认框</dialog>
  </div>
</template>

<script>
export default {
  props: {
    requests: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      currentItem: { /* 你的item数据 */ }
    };
  }
};
</script>

关键说明 #

• 动态属性访问：通过字符串形式的propName，结合this.$set（或直接赋值，若属性已存在于requests初始定义中），实现对指定属性的修改，无需逐个写if(prop === 'deleteItem')。
• 多参数传递：$emit支持传递任意数量的参数，父组件的方法按顺序接收即可。
• 响应式注意：如果requests后续会新增属性，必须用this.$set确保Vue能检测到变化；若属性在初始data中已定义，直接赋值this.requests[propName] = true也可生效。

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