我同意上述事件发射和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
    }
}

另一种方法是将setter的引用作为道具从父组件传递给子组件，类似于React中的做法。 比如，你在父组件上有一个updateValue方法来更新值，你可以这样实例化子组件:<child:updateValue="updateValue"></child>。然后在子对象上，你将有一个对应的prop: props: {updateValue: Function}，并在模板中，当输入发生变化时调用该方法:<input @input="updateValue($event.target.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
    }
  }
});

在孩子身上

 <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
    }

我不知道为什么，但我刚刚成功地更新了使用数据作为对象的父数据，:set & computed

Parent.vue

<!-- check inventory status - component -->
    <CheckInventory :inventory="inventory"></CheckInventory>

data() {
            return {
                inventory: {
                    status: null
                },
            }
        },

Child.vue

<div :set="checkInventory">

props: ['inventory'],

computed: {
            checkInventory() {

                this.inventory.status = "Out of stock";
                return this.inventory.status;

            },
        }