Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

vue.js - Update parent model from child component Vue

I have a very small app that has a donation form. The form walks the user through the steps of filling in information. I have a main component, which is the form wrapper and the main Vue instance which holds all of the form data (model). All of the child components are steps within the donation process. Each child component has input fields that are to be filled out and those field will update the parent model so that I have all of the form data in the parent model when I submit the form. Here is how the components are put together:

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

Inside the donation-form component:

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

Right now, I am setting the data from the inputs in each child component and then I have a watch method that is watching for fields to update and then I am pushing them to the $root by doing this...

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

The problem is that one of my steps I have a lot of fields and I seem to be writing some repetitive code. Also, I'm sure this is not the best way to do this.

I tried passing the data as a prop to my child components but it seems that I cannot change the props in my child component.

What would be a better way to update the root instance, or even a parent instance besides add a watch to every value in my child components?

More examples Here is my step2.vue file - step2 vue file Here is my donation-form.vue file - donation-form vue file

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can use custom events to send the data back.

To work with custom events, your data should be in the parent component, and pass down to children as props:

<step1 :someValue="value" />

and now you want to receive updated data from child, so add an event to it:

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

your child components will emit the event and pass data as arguments:

this.$emit('update', newData)

the parent component:

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

Here is a simple example with custom events:
http://codepen.io/CodinCat/pen/QdKKBa?editors=1010


And if all the step1, step2 and step3 contain tons of fields and data, you can just encapsulate these data in child components (if the parent component doesn't care about these row data).

So each child has its own data and bind with <input />

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

But the same, you will send the result data back via events.

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

(again, if your application becomes more and more complex, vuex will be the solution.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...