Vue.js 将表单数据从一个组件传递到另一个组件

我试图通过按钮从表单获取信息，该按钮不是表单所在组件的一部分

目前的结构基本上如下所示：

->组件A（按钮在此） -->在组件A中，我导入表单所在的另一个组件（B）

所以我试图通过组件A中的按钮从组件B传递信息

组件B不仅仅是组件A的一部分（这将使事情相对容易）的原因是因为它在其他几个地方使用

在A部分中，我有：

    `<ComponentB></ComponentB>
    <div class="padding">
        <button @onSubmit="onSubmit" class="add-button btn btn-md float- 
        right" 
        type="submit">Add items from component B</button>
    </div>`

组件B只包含几个文本框和日期选择器

---

总之，单击按钮时，应将组件B中键入的任何信息转换为组件A数据。

您必须创建Vuex状态来管理变量。然后，创建动作并进行变异以修改状态。在那之后，你可以在组件B中得到你想要的

const store = new Vuex.Store({
  state: {
    // your states
  },
  mutations: {
    // change state here sync
  },
  actions: {
    // call mutations here, but you can do this async as axios methods etc..
  },
  getters: {
    // need this only if state still needs some calculation.
  }
}

所以在你创造了这一切之后。您将能够调用上述操作

this.$store.dispatch('ACTION')

并得到组件B中的状态

this.$store.state.stateYouWant

或者用吸气剂

this.$store.getters.getterYouCreated

---

您好，我确实创建了vuex状态管理器。但不完全确定该在哪里采取行动$组件B或组件A中的store.dispatch（'ACTION'）？组件B包含所有文本框组件A包含要单击的按钮，以便从组件B向状态添加内容。因此，您必须首先将此状态传递到组件A中的存储。您必须在组件A中调用操作来存储状态。组件B您只需要状态。知道了？

this.$store.getters.getterYouCreated