javascript - vuejs 从子组件更新父数据

Question

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

如何正确更新组件的父数据？ 从父级传递绑定(bind)的 prop 是不好的，并且会向控制台抛出一些警告。他们的文档中有一些内容，但没有用。

Answer 1

双向绑定(bind)在 Vue 2.0 中已被弃用，取而代之的是使用更加事件驱动的架构。一般来说， child 不应该改变它的 Prop 。相反，它应该 $emit事件并让父级响应这些事件。

在您的特定情况下，您可以使用带有 v-model 的自定义组件。这是一种特殊的语法，允许接近双向绑定(bind)的东西，但实际上是上述事件驱动架构的简写。您可以在这里阅读 -> https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events .

这是一个简单的例子:

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{parentValue}}</p>
  <child v-model="parentValue"></child>
</div>

<template id="child">
   <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>

---

文档指出

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

相当于

<custom-input v-model="something"></custom-input>

这就是为什么子项上的 prop 需要命名为 value，以及为什么子项需要 $emit 一个名为 input 的事件。