在组件和 Vue 路由之间传递表单数据答案

【问题标题】：Passing Form Data Between Components & Vue Routing在组件和 Vue 路由之间传递表单数据
【发布时间】：2016-09-19 03:54:38
【问题描述】：

我正在尝试使用组件和路由创建分步表单。如果有更好或更简单的方法可以做到这一点，请随时提出建议，因为我是 Vue.js 的新手。

我有一个和三个模板。

<template id="step-1">
  <h1>Welcome to Form</h1>
</template>

<template id="step-2">
  <label>Name:</label>
  <input type="text" name="name" v-model="name" />

  <br />
  <label>Email:</label>
  <input type="email" name="email" v-model="email" />
</template>

<template id="step-3">
  <p>Review:</p>

  <!-- Display Step 2 Form Values -->
  {{ name }}
  {{ email }}

  <button>Submit</button>
</template>

我想要做的是，在#step-3 上显示输入值，然后单击按钮，通过 ajax 调用提交表单。

您可以从这里查看 Fiddle：https://jsfiddle.net/j7mwc9wk/

【问题讨论】：

标签： vue.js vue-router vue-component

【解决方案1】：

一种方法是让所有三个组件使用相同的数据对象。就这段代码而言，它可以是一个简单的 javascript 对象。更复杂一点的方法是使用 Vuex 一个官方的 Vue 数据存储。您还可以让这三个组件具有相同的父级，在这种情况下，名称和电子邮件将是父级数据方法的属性，因此所有子级都可以访问。我不知道这将如何与 Vue 路由器一起使用，但应该没问题。

【讨论】：