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

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


当前回答

子组件

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

父组件

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

:完成)

其他回答

更简单的方法是使用这个。$emit

Father.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <child v-on:listenerChild="listenerChild"/>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Father",
  data() {
    return {
      message: "Where are you, my Child?"
    };
  },
  components: {
    Child
  },
  methods: {
    listenerChild(reply) {
      this.message = reply;
    }
  }
};
</script>

Child.vue

<template>
  <div>
    <button @click="replyDaddy">Reply Daddy</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    replyDaddy() {
      this.$emit("listenerChild", "I'm here my Daddy!");
    }
  }
};
</script>

完整示例:https://codesandbox.io/s/update-parent-property-ufj4b

在父组件中——>

数据:function(){ 返回{ siteEntered: false, }; },

在子组件中——>

这个。父母。美元数据。siteEntered = true;

在子组件中:

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