vue一个页面多个组件，点击提交同时保存三个组件所有表单值（二）

要实现一个页面中多个组件的表单值同时保存，可以使用事件总线（Event Bus）或 Vuex 状态管理工具。 1. 使用事件总线 在 main.js 中创建一个全局的事件总线： ``` import Vue from 'vue' export const bus = new Vue() ``` 在组件中监听表单值变化事件： ``` import { bus } from '@/main' export default { data() { return { formValue: {} } }, methods: { save() { bus.$emit('form-changed', this.formValue) } } } ``` 在另一个组件中监听事件并保存表单值： ``` import { bus } from '@/main' export default { data() { return { formValue: {} } }, created() { bus.$on('form-changed', formValue => { this.formValue = formValue }) } } ``` 2. 使用 Vuex 安装 Vuex 并创建 store： ``` npm install vuex ``` ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { formValues: {} }, mutations: { setFormValue(state, payload) { state.formValues[payload.componentName] = payload.formValue } } }) ``` 在组件中提交表单值到 store： ``` import store from '@/store' export default { data() { return { formValue: {} } }, methods: { save() { store.commit('setFormValue', { componentName: 'component1', formValue: this.formValue }) } } } ``` 在另一个组件中从 store 获取表单值： ``` import { mapState } from 'vuex' export default { computed: { ...mapState(['formValues']), formValue2() { return this.formValues.component2 || {} } } } ``` 当保存按钮被点击时，你可以同时启动所有组件的表单保存逻辑。然后使用事件总线或 Vuex 来将所有组件的表单值进行保存。