Обновить родительскую модель от дочернего компонента Vue

Question

У меня очень маленькое приложение, которое имеет форму пожертвования. Форма перемещает пользователя через шаги заполнения информации. У меня есть основной компонент, который является оболочкой формы и основным экземпляром Vue, который содержит все данные формы (модели). Все дочерние компоненты - это шаги в рамках процесса пожертвования. Каждый дочерний компонент имеет поля ввода, которые должны быть заполнены, и в этом поле будет обновлена ​​родительская модель, чтобы у меня были все данные формы в родительской модели, когда я отправляю форму. Вот как эти компоненты вместе взятые:

<donation-form></donation-form> // Main/Parent component 

Внутри donation-form компонента:

<template> 
    <form action="/" id="give"> 
     <div id="inner-form-wrapper" :class="sliderClass"> 
      <step1></step1> 
      <step2></step2> 
      <step3></step3> 
     </div> 
     <nav-buttons></nav-buttons> 
    </form> 
</template> 

Прямо сейчас, я устанавливаю данные из входов каждого ребенка компонента, а затем у меня есть метод watch что наблюдает за полями для обновления, а затем я толкая их к $root делая это ...

watch: { 
    amount() { 
     this.$root.donation.amount = this.amount; 
    } 
} 

в проблема в том, что один из моих шагов у меня много полей, и я, кажется, пишу какой-то повторяющийся код. Кроме того, я уверен, что это не лучший способ сделать это.

Я попытался передать данные как prop моим дочерним компонентам, но кажется, что я не могу изменить реквизиты в своем дочернем компоненте.

Что может быть лучшим способом обновить корневой экземпляр или даже родительский экземпляр, кроме добавления часов для каждого значения в моих дочерних компонентах?

Больше примеров Вот мой step2.vue файл - step2 vue file Вот мой donation-form.vue файл - donation-form vue file

Answer 1

Вы можете использовать custom events для отправки данных обратно.

Для работы с пользовательскими событиями, ваши данные должны быть в родительском компоненте, и передать вниз к детям в качестве реквизита:

<step1 :someValue="value" /> 

и теперь вы хотите получать обновленные данные от ребенка, поэтому добавить событие это:

<step1 :someValue="value" @update="onStep1Update" /> 

ваших дочерних компонентов будет испускать событие и передавать данные в качестве аргументов:

this.$emit('update', newData) 

родительский компонент:

methods: { 
    onStep1Update (newData) { 
    this.value = newData 
    } 
} 

Вот простой пример с пользовательскими событиями:
http://codepen.io/CodinCat/pen/QdKKBa?editors=1010

---

И если все step1, step2 и step3 содержат тонны полей и данных, вы можете просто инкапсулировать эти данные в дочерние компоненты (если родительский компонент не заботится об этих данных строки).

Таким образом, каждый ребенок имеет свои собственные данные и связываются с <input />

<input v-model="data1" /> 
<input v-model="data2" /> 

Но то же самое, вы будете отправлять данные результата обратно через событие.

const result = this.data1 * 10 + this.data2 * 5 
this.$emit('update', result) 

(опять же, если ваше приложение становится все более и более сложным, vuex будет решение

Answer 2

В вашем случае вы можете использовать V-модель, как следующее:.

<form action="/" id="give"> 
    <div id="inner-form-wrapper" :class="sliderClass"> 
     <step1 v-model="step1Var"></step1> 
     <step2 v-model="step2Var"></step2> 
     <step3 v-model="step3Var"></step3> 
    </div> 
    <nav-buttons></nav-buttons> 
</form> 

v-model является по существу, синтаксический сахар для обновления данных о событиях пользовательских ввода.

<input v-model="something"> 

является просто синтаксический сахар для:

<input v-bind:value="something" v-on:input="something = $event.target.value"> 

Вы можете пройти пропеллер: value в дочерних компонентов, а также об изменении входного поля вызова, после чего изменит переменную step1Var.

this.$emit('input', opt) 

Вы можете посмотреть на этом answer, где вы можете увидеть реализацию такого компонента, где переменная передается thouugh об-модели.

Answer 3

Лично я предпочитаю иметь общую функцию для обновления родителя при работе с формами вместо того, чтобы писать метод для каждого ребенка. Для иллюстрации - немного сгущенное - как это в родительском:

<template lang="pug"> 
    child-component(:field="form.name" fieldname="name" @update="sync") 
</template> 
<script> 
export default { 
    methods: { 
    sync: function(args) { 
     this.form[args.field] = args.value 
    } 
    } 
} 
</script> 

И в компоненте ребенка:

<template lang="pug"> 
    input(@input="refresh($event.target.value)") 
</template> 
<script> 
export default { 
    props: ['field', 'fieldname'], 
    methods: { 
    refresh: function(value) { 
     this.$emit('update', {'value': value, 'field': this.fieldname}); 
    } 
    } 
} 
</script>