Vuejs更新子组件的父数据

我开始玩vuejs(2.0)。我构建了一个包含一个组件的简单页面。该页面有一个带有数据的Vue实例。在那个页面上，我注册并将组件添加到html中。组件有一个输入[type=text]。我希望该值反映在父实例(主Vue实例)上。

如何正确地更新组件的父数据? 从父对象传递绑定道具是不好的，会向控制台抛出一些警告。他们的文件里有一些东西，但不管用。

当前回答

从文档中可以看到:

在Vue.js中，父子组件关系可以概括为向下的道具，向上的事件。父进程通过道具向下传递数据给子进程，子进程通过事件向父进程发送消息。接下来让我们看看它们是如何工作的。

如何传递道具

下面是将道具传递给子元素的代码:

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

如何触发事件

HTML:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

JS:

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

2016-12-01 16:38:56

其他回答

在孩子身上

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

2020-09-10 01:21:06

子组件

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

父组件

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

:完成)

2019-04-07 02:27:56

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

2019-12-26 16:29:12

在子组件中:

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

在父组件中:

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

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

2018-09-09 10:15:50