Vue子组件v-model绑定父组件值失效，如何正确实现双向绑定？

你的问题出在子组件没正确实现v-model的双向绑定逻辑——Vue里组件的v-model本质是**value属性传递 + input事件触发**的语法糖，父组件用<BaseTextBox v-model="value"等同于给子组件传value属性，同时监听input事件更新自身的value。但你的子组件既没把props的value和输入框关联，也没触发input事件通知父组件更新值，所以父组件的this.value一直是空的。

下面给两种修改方案：

方案1：直接绑定props并触发事件（最简写法） #

适合不需要对输入做额外处理的场景，直接把输入框的value绑定到props的value，同时监听输入事件触发父组件的input事件：

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

<script lang="ts">
export default {
  name: "BaseTextBox",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
};
</script>

方案2：本地数据中转（适合需处理输入的场景） #

如果需要对输入内容做格式化、校验等处理，可以用本地data变量中转，通过watch同步父子组件的值：

<template>
  <input type="text" v-model="inputValue" />
</template>

<script lang="ts">
export default {
  name: "BaseTextBox",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      inputValue: this.value, // 初始化时同步父组件传入的值
    };
  },
  watch: {
    // 父组件value变化时，同步到本地inputValue
    value(newVal) {
      this.inputValue = newVal;
    },
    // 本地输入变化时，触发input事件通知父组件更新
    inputValue(newVal) {
      this.$emit("input", newVal);
    },
  },
};
</script>

修改后，父组件调用check方法时就能正确获取到this.value的最新值了。

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