我同意上述事件发射和v模型的答案。但是，我认为我应该发布我所发现的关于具有多个表单元素的组件，这些元素想要发射回它们的父元素，因为这似乎是谷歌返回的第一批文章之一。

我知道这个问题指定了单个输入，但这似乎是最接近的匹配，并且可以为使用类似vue组件的人节省一些时间。此外，还没有人提到.sync修饰符。

据我所知，v模型解决方案只适合一个输入返回到它们的父。我花了一些时间寻找它，但Vue(2.3.0)文档确实展示了如何将发送到组件中的多个道具同步回父组件(当然是通过emit)。

它被恰当地称为.sync修饰符。

以下是文档的内容:

在某些情况下，我们可能需要对道具进行“双向绑定”。 不幸的是，真正的双向绑定会产生维护问题， 的源可以使父组件发生变异 这种突变在父母和孩子身上都很明显。 这就是为什么我们建议以模式发出事件的原因 更新:myPropName。例如，在一个假设的组件中 标题道具，我们可以传达分配新值的意图 :

this.$emit('update:title', newTitle)

然后家长就可以听了 并更新本地数据属性(如果需要的话)。为 例子:

<text-document   
 v-bind:title="doc.title"  
 v-on:update:title="doc.title = $event"
></text-document>

为了方便起见，我们用.sync修饰符提供了这种模式的简写:

<text-document v-bind:title.sync="doc.title"></text-document>

你也可以通过一个对象同时同步多个对象。在这里查看文档

在子组件中:

this.$emit('eventname', this.variable)

在父组件中:

<component @eventname="updateparent"></component>

methods: {
    updateparent(variable) {
        this.parentvariable = variable
    }
}

在孩子身上

 <input
            type="number"
            class="form-control"
            id="phoneNumber"
            placeholder
            v-model="contact_number"
            v-on:input="(event) => this.$emit('phoneNumber', event.target.value)"
    />

data(){
    return {
      contact_number : this.contact_number_props
    }
  },
  props : ['contact_number_props']

在父

<contact-component v-on:phoneNumber="eventPhoneNumber" :contact_number_props="contact_number"></contact-component>


 methods : {
     eventPhoneNumber (value) {
      this.contact_number = value
    }

正确的方法是$emit()主Vue实例侦听的子组件中的事件。

// Child.js
Vue.component('child', {
  methods: {
    notifyParent: function() {
      this.$emit('my-event', 42);
    }
  }
});

// Parent.js
Vue.component('parent', {
  template: '<child v-on:my-event="onEvent($event)"></child>',
  methods: {
    onEvent: function(ev) {
      v; // 42
    }
  }
});

我认为这个可以达到目的:

@change=“$emit（变量）”

也可以将道具作为对象或数组传递。在这种情况下，数据将是双向绑定的:

(这一点在主题的最后注明:https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow)

Vue.component('child', { template: '#child', props: {post: Object}, methods: { updateValue: function () { this.$emit('changed'); } } }); new Vue({ el: '#app', data: { post: {msg: 'hello'}, changed: false }, methods: { saveChanges() { this.changed = true; } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <div id="app"> <p>Parent value: {{post.msg}}</p> <p v-if="changed == true">Parent msg: Data been changed - received signal from child!</p> <child :post="post" v-on:changed="saveChanges"></child> </div> <template id="child"> <input type="text" v-model="post.msg" v-on:input="updateValue()"> </template>