Vue子组件input绑定父组件prop异常原因咨询

问题描述 #

尝试将子组件input的值与父组件的值绑定：父组件将searchText作为prop valueProp传给子组件，子组件把data中的value初始化为this.valueProp，并绑定到input：

<input type="text" :value="value" @input="$emit('changeInput', $event.target.value)" />

出现以下问题：

• 输入框无内容显示，父组件searchText和子组件valueProp仅更新最后一个输入字符
• 子组件的value完全不更新；若移除:value="value"，输入正常但子组件value仍不随父组件searchText同步

核心原因解析 #

1. 子组件data的value仅初始化一次，不响应prop变化 #

子组件的data函数只在组件创建阶段执行一次，初始化value为当时的valueProp值。之后父组件更新searchText导致valueProp变化时，子组件的value不会自动同步——Vue不会主动把prop的变化同步到未关联的data变量上，除非你手动监听。

2. 输入框被强制重置，导致只能保留最后一个字符 #

输入框绑定的是子组件的value，而这个value始终是初始化时的空值（或初始值）。当你输入字符时：

• 触发@input事件，把输入的完整值emit给父组件
• 父组件更新searchText，进而子组件的valueProp更新
• 但子组件的value还是旧的空值，Vue会把输入框的内容重置为value的空值
• 这个过程极快，你只能看到最后一次输入的字符被保留（因为最后一次emit后，输入框还没来得及重置就完成了一次循环）

如果移除:value="value"，输入框变成非受控状态，浏览器会维护输入框的内容，所以输入正常，但子组件的value还是没有监听valueProp的变化，自然不会同步更新。

修正思路（不用v-model的方案） #

如果不想用v-model，要实现双向同步，可以通过监听prop的变化来更新子组件的data：

// 子组件script
export default {
  emits: ["changeInput"],
  data() {
    return {
      value: this.valueProp,
    };
  },
  props: {
    valueProp: {
      type: String,
      required: true,
    },
  },
  watch: {
    valueProp(newVal) {
      this.value = newVal;
    },
  },
};

或者直接把输入框绑定到valueProp（注意不能直接修改prop，所以还是要通过emit传递值）：

<!-- 子组件template -->
<input type="text" :value="valueProp" @input="$emit('changeInput', $event.target.value)" />

这样输入框会直接响应valueProp的变化，同时通过emit把输入值传给父组件更新数据源。

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