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

@change=“$emit（变量）”

子组件

使用这个。$emit('event_name')向父组件发送一个事件。

父组件

为了在父组件中监听该事件，我们执行v-on:event_name，并在该事件发生时执行一个方法(例如handleChange)

:完成)

2021 ANSWER - Vue 2.3+

简单回答:只需在父类中添加.sync修饰符，并将数据作为道具传递给子类:

    // PARENT:
    data () {
    return {
      formData: {
        members: [] //<- we wanna pass this one down to children and add/remove from the child component
      }
    }

   // PARENT TEMPLATE:
   <!-- ADD MEMBERS -->
  <add-members :members.sync="formData.members" />

嵌套子组件:AddMembers.vue

export default {
  name: 'AddMembers',
  props: ['members'],
  methods: {
    addMember () {
      this.members.push(new Member()) // <-- you can play and reactivity will work (in the parent)  
    },
    removeMember (index) {
      console.log('remove', index, this.members.length < 1)
      this.members.splice(index, 1)
    }
  }
}

说来话长:实际上，来自子组件的更改被$发出并更新formData。父类的成员[]。

来源:Mauro Perez at medium

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

正确的方法是$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
    }
  }
});