Vue基于输入框动态修改实例数据与父子组件数据同步问题咨询

问题核心原因 #

Vue 遵循单向数据流原则：父组件传递给子组件的 prop 只能由父组件更新，子组件不允许直接修改传入的 prop。你当前直接将 v-model 绑定到子组件接收的 desc prop 上，修改的只是子组件内部生成的临时响应式值，并不会同步到父实例的 taskList 数组中，因此访问 app.taskList[0].desc 始终是空字符串。

修复方案 #

标准规范实现（推荐） #

通过自定义事件通知父组件更新自身数据，数据流清晰易维护。

1. 修改子组件代码：

Vue.component("task-item", {
  props: {
    id: Number,
    desc: String,
  },
  template: taskTemplate,
  computed: {
    // 封装用于本地绑定的计算属性，读走prop、写抛事件
    localDesc: {
      get() {
        return this.desc
      },
      set(val) {
        this.$emit('update-desc', this.id, val)
      }
    }
  }
});

2. 修改子组件模板绑定：

<div>
  <input type="text" placeholder="Insert your task" v-model="localDesc"/>
  <p>{{ desc }}</p>
</div>

3. 修改父组件调用逻辑，新增更新方法：

<task-item
  v-for="item in taskList"
  v-bind="item"
  :key="item.id"
  @update-desc="updateTaskDesc"
></task-item>

var app = new Vue({
  el: "#task-list",
  data: {
    taskList: [
      { id: 1, desc: "" },
      { id: 2, desc: "" },
    ]
  },
  methods: {
    newTask() {
      this.taskList.push({ id: this.taskList.length + 1, desc: "" })
    },
    // 新增同步任务描述的方法
    updateTaskDesc(taskId, newDesc) {
      const targetTask = this.taskList.find(item => item.id === taskId)
      if(targetTask) targetTask.desc = newDesc
    }
  }
});

快速实现（可选） #

如果你的组件业务耦合度高、不需要通用复用，可以直接将整个任务对象传递给子组件，利用对象的引用特性直接修改属性，父组件会自动同步：

1. 子组件调整prop定义：

props: {
  task: Object
}

2. 模板绑定改为：

<input type="text" placeholder="Insert your task" v-model="task.desc"/>

3. 父组件调用修改为：

<task-item
  v-for="item in taskList"
  :task="item"
  :key="item.id"
></task-item>

场景最佳实践 #

• 通用业务组件优先走「prop传值+事件通知更新」的单向数据流方案，避免组件间隐式依赖，后期排查问题更简单
• 提交数据时直接读取父实例的 app.taskList 即可，所有用户输入已经同步完成，直接调用后端接口提交即可
• v-for 必须绑定 key 属性，避免列表更新时出现渲染异常

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