Question

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

基本上当前的结构如下：

->组件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>`

这是我的数据，位于组件A的导出默认值中

从'./ComponentB'导入ComponentB；从“ vuex”导入{mapActions}；

export default { name: "ComponentA", components:{ ComponentB }, data(){ return{ firstname: '', surname: '', dateOfBirth: '', isPolicyHolder: '', drivingLicence: licenceNumber: '', countryLicenced: '', coverEffectiveFrom: '', coverEffectiveTo: '', } }

我也有vuex状态，正在尝试将信息传递给按钮单击。

在组件A中，这是方法：

    `methods:{
    ...mapActions(['addDriver']),
    onSubmit(e){
        e.preventDefault();
        this.addDriver( this.firstname, 
                        this.surname, 
                        this.dateOfBirth,
                        this.isPolicyHolder,
                        this.licenceNumber,
                        this.countryLicenced,
                        this.coverEffectiveFrom,
                        this.coverEffectiveTo)
    }
}`

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

总而言之，单击按钮时，组件B中键入的任何信息都应带到组件A数据中。

Answer 1

您必须创建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

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

1 个答案: