vue3 ts父子通讯

在Vue3中，使用TypeScript进行父子组件之间的通信通常涉及Vuex状态管理库或自定义事件/prop。以下是两种常见的方式：

1. **Vuex** (状态管理)：
- 父组件通过`$store.dispatch()`触发动作，改变store里的状态。
- 子组件通过`computed`、`watch`监听`$store.state`的变化。

   // parent.vue
   this.$store.dispatch('updateData', payload)

   // actions.ts
   export const updateData = ({ commit }, data) => {
     commit('UPDATE_DATA', data);
   }

   // mutations.ts
   export const UPDATE_DATA = (state, data) => {
     state.data = data;
   }

2. **自定义事件/prop**：
- 父组件向子组件传递数据时，可以使用`v-on`监听子组件的自定义事件，或者通过props直接传递。
- 子组件处理完数据变化后，可以发射自定义事件通知父组件。

   // Parent.vue
   emit('childUpdated', updatedData);

   // Child.vue
   methods: {
     handleDataUpdate() {
       // 更新数据...
       this.$emit('parentUpdate', newData);
     }
   }