vuejs v2 将数据传递给组件并在更改时更新父级答案

【问题标题】：vuejs v2 pass data to component and update parent when changedvuejs v2 将数据传递给组件并在更改时更新父级
【发布时间】：2017-06-03 05:07:01
【问题描述】：

我想要构建的是一个可以从其输入中检测错误的表单。输入在表单的一个部分中呈现（在我当前的设置中）。但工作几个小时后，它就不起作用了。

让这个概念发挥作用的最佳方法是什么？我应该为此使用插槽还是有其他方法？

这是我的代码：

//Form.vue
<template>
<form method="POST" action="/projects">

<slot></slot>

<div class="control">
    <button class="button is-primary">Create</button>
</div>

</template>

<script>
import {FormHelper} from './classes/FormHelper.js';

export default {

    /*
     * The component's properties.
     */
    props: {
        fields: Object
    },

    data() {
        return {
            form: new FormHelper(this.fields) //this must be kwown in the Input.
        };
    },

}
</script>

//Input.vue
<template>
<div class="control">
    <label for="name" class="label">{{label}}</label>

    <input type="text" id="name" name="name" class="input">

    <!--<span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>-->
</div>

</template>

<script>

export default{
    /*
     * The component's properties.
     */
    props: {
        placeholder: String,
        label: String,
        name: String,
        originalValue: String,
    },

}
</script>

在浏览器中的实现：

<vue-form :fields="{'name': 'piet', 'description': 'arie'}">
    <vue-input
        label="The Name"
        name="name"
    ></vue-input>

    <vue-input
        label="The Description"
        name="description"
    ></vue-input>
</vue-form>

【问题讨论】：

组件的灵感来自：github.com/laracasts/Vue-Forms，他的目标是制作可重用的 Vue 组件。

标签： forms data-binding parent vue.js slots

【解决方案1】：

您可以使用自定义事件。在 cild 组件中

this.$emit('EventName', someData)

在父母中你可以处理它

v-on:EventName="doSmth"

【讨论】：

【解决方案2】：

来自documentation：

在 Vue.js 中，父子组件的关系可以概括为 props down，events up。父级通过 props 向下传递数据给子级，子级通过事件向父级发送消息。让我们看看他们接下来是如何工作的。

How to pass props

以下是将 props 传递给子组件的代码：（使用 v-model value is passed as props，或使用 v-bind in myMessage parentMsg 作为 props 传递）

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

How to emit event

以下是您更新父母的方式：每当您在孩子中增加：您通过调用由父母处理的this.$emit('increment') 来亲密父母。

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

【讨论】：