Vue如何从ItemRow子组件修改父组件的APIData数组？

现有实现的问题 #

你当前直接导入父组件文件操作APIData的方案不可行，原因有两点：

• 你导入的Index.vue是组件的类定义对象，不是页面运行时的父组件实例，直接操作其属性不会触发页面响应式更新
• 该写法违反了Vue的单向数据流设计原则，父子组件强耦合，后续组件复用、问题排查难度都会大幅提升

正确实现方案 #

按照Vue的组件通信规范，子组件通过$emit触发自定义事件，将操作参数传递给父组件，由数据的持有者（父组件）执行数据修改逻辑，具体修改如下：

第一步：修改子组件ItemRow.vue #

<script>
import moment from 'moment';
import { api } from '../axios-api'
// 删掉导入父组件的无效代码

export default {
    name: "ItemRow",
    props: {
        task: {
            type: Object,
            required: true,
        },
        index: {
            type: Number,
            required: true,
        }
    },
    methods: {
        completeTask(task) {
            const newCompleteStatus = !task.complete
            api.patch(`tasks/${task.id}/`, { complete: newCompleteStatus })
            .then(() => {
                // 触发更新完成状态的自定义事件，传递任务id和新的完成状态
                this.$emit('update-complete', task.id, newCompleteStatus)
            })
            .catch(response => {
                console.log('error', response)
            })
        },
        deleteTask(task, index) {
            api.delete(`tasks/${task.id}/`)
              .then(() => {
                  // 触发删除的自定义事件，传递要删除的索引
                  this.$emit('delete-task', index)
              })
        },
        formatDate(date) {
            return moment(date).format('YYYY-MM-DD');
        },
    }
}
</script>

第二步：修改父组件Index.vue #

先给子组件绑定自定义事件监听：

<ItemRow 
    v-for="(task, index) in APIData"
    :key="task.id"
    :task="task"
    :index="index"
    @delete-task="handleDeleteTask"
    @update-complete="handleUpdateComplete"
>
</ItemRow>

然后在父组件的methods中添加对应的处理逻辑：

methods: {
    createTask(title) {
        api.post('tasks/', {title: title})
          .then((response) => {
              this.APIData.unshift(response.data)
              this.newTask = ''
          })
    },
    // 新增删除任务处理方法
    handleDeleteTask(index) {
        this.APIData.splice(index, 1)
    },
    // 新增更新任务完成状态处理方法
    handleUpdateComplete(taskId, newCompleteStatus) {
        const targetTask = this.APIData.find(task => task.id === taskId)
        if (targetTask) {
            targetTask.complete = newCompleteStatus
        }
    }
},

该方案严格遵循Vue设计规范，父子组件职责清晰，复用性和可维护性都更好。

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