从子组件 Vue 更新父模型 [英] Update parent model from child component Vue
问题描述
我有一个非常小的应用程序，里面有一个捐赠表格.该表单会引导用户完成填写信息的步骤.我有一个主要组件，它是表单包装器和包含所有表单数据(模型)的主 Vue 实例.所有子组件都是捐赠过程中的步骤.每个子组件都有要填写的输入字段，这些字段将更新父模型，以便我在提交表单时拥有父模型中的所有表单数据.以下是组件的组合方式:
在 donation-form 组件内部:
<form action="/" id="give"><div id="inner-form-wrapper" :class="sliderClass"><step1></step1><step2></step2><step3></step3><导航按钮></导航按钮></表单></模板>
现在，我正在从每个子组件的输入中设置数据，然后我有一个 watch 方法来监视要更新的字段，然后我将它们推送到 $root 这样做...
观看:{数量() {this.$root.donation.amount = this.amount;}}问题是我的步骤之一我有很多字段，而且我似乎正在编写一些重复的代码.另外，我确定这不是执行此操作的最佳方法.
我尝试将数据作为 prop 传递给我的子组件，但似乎我无法更改子组件中的 props.
除了为我的子组件中的每个值添加一个监视之外，还有什么更好的方法来更新根实例，甚至是父实例?
更多示例这是我的 step2.vue 文件 - step2 vue 文件这是我的 donation-form.vue 文件 - donation-form vue 文件
您可以使用 自定义事件将数据发回.
要使用自定义事件，您的数据应位于父组件中，并作为道具传递给子组件:
现在你想从孩子那里接收更新的数据，所以给它添加一个事件:
您的子组件将发出事件并将数据作为参数传递:
this.$emit('update', newData)父组件:
方法:{onStep1Update (newData) {this.value = newData}}这是一个带有自定义事件的简单示例:
http://codepen.io/CodinCat/pen/QdKKBa?editors=1010
如果所有的 step1、step2 和 step3 都包含大量的字段和数据，您可以将这些数据封装在子组件中(如果父组件不关心这些行数据).
所以每个孩子都有自己的数据并用
<input v-model="data2"/>但同样，您将通过事件将结果数据发回.
const 结果 = this.data1 * 10 + this.data2 * 5this.$emit('更新', 结果)(同样，如果您的应用程序变得越来越复杂，vuex 将是解决方案.
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
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.
这篇关于从子组件 Vue 更新父模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
