uniapp vue3 子页面返回数据给父页面

在uniApp中使用Vue3进行父子组件通信时，如果子页面需要将数据返回给父页面，通常会通过事件总线（Event Bus）或者Vuex状态管理库来进行。这里简单解释一下这两种常见的做法：

**1. 使用Event Bus（事件中心）：**
子页面（例如`child.vue`）可以触发一个自定义事件，然后在父页面（`parent.vue`）监听这个事件并接收数据。

// child.vue
export default {
  methods: {
    sendDataBack() {
      this.$emit('dataFromChild', { keyData: 'value' });
    }
  }
}

// parent.vue
<template>
  <view>
    <child @dataFromChild="handleData"></child>
  </view>
</template>

<script>
import Child from '@/components/Child.vue';
export default {
  components: {
    Child
  },
  methods: {
    handleData(data) {
      console.log('Received data:', data);
    }
  }
};
</script>

**2. 使用Vuex（状态管理库）：**
如果涉及到更复杂的数据共享和管理，可以将数据存储在Vuex store中，子页面更新数据后通过commit动作通知store，然后父页面通过actions获取最新状态。

首先，在`store.js`中创建一个action和mutation：

const state = {};
const mutations = {
  setData(state, data) {
    state.data = data;
  }
};

const actions = {
  async sendDataToParent({ commit }, data) {
    await commit('setData', data);
  }
};

export default {
  state,
  mutations,
  actions
};

然后在子页面中调用`dispatch`：

this.$store.dispatch('sendDataToParent', { keyData: 'value' });

在父页面的组件内通过`mapActions`获取`getData`方法并调用它来获取数据：

<template>
  <button @click="getData">Get Data</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    getData() {
      this.$store.dispatch('getData');
    }
  },
  computed: {
    // 如果你想直接在模板中显示数据，可以在这里计算
    ...mapActions(['getData'])
  }
};
</script>