我有一个非常小的应用程序,有一个捐赠表格 . 表单引导用户完成填写信息的步骤 . 我有一个主要组件,它是表单包装器和主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
传递给我的子组件,但似乎我无法更改子组件中的道具 .
除了将监视添加到子组件中的每个值之外,更新根实例甚至父实例的更好方法是什么?
More examples 这是我的 step2.vue
文件 - step2 vue file这是我的 donation-form.vue
文件 - donation-form vue file
3 回答
对于您的情况,您可以使用如下的v模型:
v-model本质上是用于更新用户输入事件数据的语法糖 .
只是语法糖:
您可以在子组件中传递prop:
value
,并在更改输入字段调用之后,这将更改step1Var
变量 .你可以看看这个answer,你可以看到这个组件的实现,其中变量通过th-v-model传递 .
您可以使用custom events发回数据 .
要使用自定义事件,您的数据应该在父组件中,并作为props传递给子项:
现在您想要从子级接收更新的数据,因此向其中添加一个事件:
您的子组件将发出事件并将数据作为参数传递:
父组件:
以下是自定义事件的简单示例:
http://codepen.io/CodinCat/pen/QdKKBa?editors=1010
如果所有step1,step2和step3都包含大量字段和数据,则可以将这些数据封装在子组件中(如果父组件不关心这些行数据) .
所以每个孩子都有自己的数据并与
<input />
绑定但同样,您将通过事件发回结果数据 .
(再次,如果您的应用程序变得越来越复杂,vuex将成为解决方案 .
我个人更喜欢在使用表单时使用通用函数来更新父表,而不是为每个孩子编写一个方法 . 为了说明 - 有点浓缩 - 在父母中这样:
在子组件中: