Vue3+Element+Ts语法糖实现数据提交到指定组件页面

在Vue3中，结合Element UI库和TypeScript（Ts）可以创建一个高效、类型安全的应用。如果你想将数据从一个组件提交到另一个指定的组件页面，你可以使用Vuex状态管理库来存储和传递数据，并利用事件系统如`@emit`来触发动作。

首先，安装依赖：

npm install vuex element-ui @vue/cli-plugin-vuex @types/vuex

然后，在项目中设置Vuex store，例如在store目录下的index.ts:

import { createStore } from 'vuex';

export const store = createStore({
  state: {
    dataToSubmit: null, // 存储需要传递的数据
  },
  mutations: {
    setDataToSubmit(state, payload) {
      state.dataToSubmit = payload;
    },
  },
  actions: {
    submitData({ commit }, payload) {
      commit('setDataToSubmit', payload);
      // 发送异步请求或导航到目标组件
      this.$router.push('/targetComponent');
    },
  },
});

在源组件里，你可以使用`emit`触发这个动作并携带数据：

<template>
  <el-button @click="submitData">提交数据</el-button>
</template>

<script lang="ts">
import { useStore } from 'vuex';
...
methods: {
  async sendData() {
    await this.$store.dispatch('submitData', yourData);
  },
},
</script>

在接收数据的目标组件（如`TargetComponent.vue`）中，监听`$on`事件接收数据：

<template>
  <div v-if="dataFromParent">{{ dataFromParent }}</div>
</template>

<script lang="ts">
import { computed } from 'vue';
import { onMounted } from '@vue/runtime-core';

export default {
  setup() {
    const store = useStore();
    onMounted(() => {
      store.subscribe((mutation) => {
        if (mutation.type === 'SET_DATA_TO_SUBMIT') {
          const data = mutation.payload; // 获取提交过来的数据
          this.dataFromParent = data;
        }
      });
    });

    return {};
  },
};
</script>