vuejs更新子组件的父数据 [英] vuejs update parent data from child component

问题描述

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

I'm starting to play with vuejs (2.0). I built a simple page with one component in it. The page has one Vue instance with data. On that page I registered and added the component to html. The component has one input[type=text]. I want that value to reflect on the parent (main Vue instance).

如何正确更新组件的父数据？
从父级传递绑定的prop并不好，并向控制台发出一些警告。他们的文档中有一些东西，但它没有用。

How do I correctly update the component's parent data? Passing a bound prop from the parent is not good and throws some warnings to the console. They have something in their doc but it is not working.

推荐答案

在Vue 2.0中不推荐使用双向绑定使用更多事件驱动的架构。一般来说，孩子不应该改变它的道具。相反，它应该 $ emit 事件，让父母回应这些事件。

Two-way binding has been deprecated in Vue 2.0 in favor of using a more event-driven architecture. In general, a child should not mutate its props. Rather, it should $emit events and let the parent respond to those events.

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

In your specific case, you could use a custom component with v-model. This is a special syntax which allows for something close to two-way binding, but is actually a shorthand for the event-driven architecture described above. You can read about it here -> https://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>

这就是为什么孩子的道具需要被命名为值，为什么孩子需要$发出名为 input 的事件。

That is why the prop on the child needs to be named value, and why the child needs to $emit an event named input.

这篇关于vuejs更新子组件的父数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！