Vue组件prop与实例变量绑定问题：v-model绑定失效求助

云原生阿岚

2026-5-6

解决Vue组件v-model双向绑定失效的问题

咱们来一步步排查你的代码问题，核心原因是组件没有正确传递输入框的最新值给父组件，导致双向绑定的闭环断了：

问题分析

输入值未正确捕获：你用:value="abc"单向绑定了输入框的值，但abc是父组件传递的props，不能直接修改。而你的submit方法里emit的是this.abc——这还是父组件传过来的旧值，根本不是输入框的最新内容。
事件触发时机可选优化：@change事件要等输入框失去焦点才触发，如果想要实时同步输入内容，换成@input会更符合用户预期。

修正后的代码

先调整组件部分，确保能正确捕获输入框的最新值并传递给父组件：

Vue.component('terms',{
  model: { 
    prop: 'abc', 
    event: 'input', // 换成Vue默认的input事件，更符合通用习惯
  },
  props: ['abc'],
  template: '<div><input type="text" name="terms" class="form-control" title="" @input="handleInput" :value="abc"/></div>',
  methods: {
    handleInput: function(event) {
      // 直接获取输入框的当前值，emit给父组件
      this.$emit('input', event.target.value);
    }
  }
});

var vm = new Vue({
  el: '#id',
  data: { formTerms: '' },
});

HTML部分保持不变：

<terms v-model="formTerms"></terms>

为什么这样改？

用@input监听输入事件，每一次按键输入都会触发，实现实时同步（如果还是想要失去焦点才同步，换回@change就行）。
在事件方法里通过event.target.value获取输入框的最新值，而不是依赖this.abc——因为props的更新是异步的，没法实时拿到用户刚输入的内容。
model选项里的event设为input，和Vue原生v-model的行为保持一致，父组件的v-model="formTerms"会自动监听这个事件并更新formTerms，然后把最新的formTerms传给组件的abc props，输入框的value也会跟着更新，形成完整的双向绑定闭环。