Vue.js 提交来自多个组件的值

我正在使用创建注册页面，我在组件中有这样的每个选项卡

个人信息：

个人信息
全名*
年龄*

联系方式：

联系方式
流动的*
电子邮件*

所以我的问题是，提交表单的最佳方式是什么，我需要vuex来存储状态还是有更好/更简单的方式

谢谢

这取决于。。。 答案取决于各种因素。例如，您是否已经在使用vuex、应用程序的大小、应用程序的测试能力，甚至字段是如何得到验证的（异步/api验证？）

当它是一个简单的应用程序，并且我只有直接的父=>子关系时，我倾向于跳过添加Vuex作为依赖项。（但我主要处理水疗，所以我通常使用它）YMMV

在这种情况下，需要在父级中定义字段。然后为每个值向子对象添加道具和发射器，并在父对象上添加侦听器。但是，当您开始添加更多字段时，您可能会觉得这很乏味，可以选择分组或整体传递对象中的字段（并且只在选项卡中选择您需要的字段），然后您可以在选项卡组件中实现自己的

v-model

，这可以使传递对象变得非常容易

如果您使用的是更新的Vue版本（2.6+），则可以使用Vue.observable 在多个组件之间共享一个存储区，而无需Vuex的铃声/口哨

有一个示例演示了如何使用它构建vuex克隆，但实际上，创建一个适合您需要的存储要简单得多。如果您对如何实现它感兴趣，请在评论中告诉我，我可以描述它

---

与定制商店合作 就这么简单

使用…创建一个

store.js

文件

import Vue from 'vue';

const store = Vue.observable({
  name: null,
  email: null,
  age: null,
  mobile: null,
});

export default store;

然后，在您想要访问它的任何组件中，在创建期间添加存储

从“./store”导入存储；
导出默认值{
姓名：“个人信息”，
创建（）{
这个.$store=store；
}
};

现在，您可以通过

$store

---

你失去了优势，比如Vuex提供的变异“时间旅行”。因为您没有处理通量模式（vuex）所要处理的规模，所以我会在这样大小的应用程序中使用此解决方案。

Ya您应该只使用vuex，它像数据一样组合在一起，因此不会分布在多个文件中。如果您要将此信息发送回后端，那么在一个地方建立大多数后端连接会更容易。没有向导，我用这样的存储重拨了你的代码。请注意computed属性，而不是使用数据。通过将其作为计算属性执行，您不必编写任何代码来更改存储区中存储的变量

个人电脑

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Personal Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Full Name <span class="text-danger">*</span></label>
            <input
              type="text"
              value=""
              class="form-control"
              v-model="register.name"
            />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Age <span class="text-danger">*</span></label>
            <input
              type="number"
              value=""
              class="form-control"
              v-model="register.age"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    register() {
      return this.$store.state.register;
    },
  },
};
</script>

如果你决定走商店路线，你所要做的就是这样 1.npm安装vuex 2.在src文件夹中添加一个名为store的文件夹 3.添加一个名为index.js的文件 4.转到main.js并添加此行“从导入存储”。/store 5.如果显示新的“Vue”（{“添加”存储区），则将对其进行注册

---

Vuex非常简单，随着项目的不断扩大，它使生活变得更加轻松。

.sync修改器提供了道具的双向绑定模式，您可以在这里阅读

在父组件中，可以通过以下方式使用.sync修改器：

<ChildComponent :name.sync="parentNameProperty" />
...
data: () => ({ parentNameProperty: '' }),
...

---

Vuex是处理状态的一种很好的方法，但在小型应用程序中可以使用上述模式。

如果您在父组件中有“保存”按钮，则可以传递一个对象，该对象的键将用作各个组件输入字段中的v模型。由于对象是通过引用传递的，因此整个数据都将可用e在父组件中。谢谢Daniel，我真的很有兴趣避免vuex，我的应用程序中不使用它，我只是在单独的组件中使用简单的向导和每个选项卡，并希望发送数据，请描述您建议的解决方案的方法更新答案和可观察的解决方案示例谢谢Daniel，我会检查，我还需要弄清楚如何添加验证，我使用的是vuelidate。您可以将存储中的数据（vue.observable）与数据以相同的方式处理，因此vuelidate或任何验证库的使用应该是相同的。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    register: {},
  },
  actions: {
    // register({commit}, data){
    //put in some stuff here.
    //},
  },
});

<ChildComponent :name.sync="parentNameProperty" />
...
data: () => ({ parentNameProperty: '' }),
...

...
props: {
  name: {
    type: String,
    default: ''
  }
}
...
this.$emit(update:parentNameProperty, newValue)
...