Vue3 传参到弹出层反填

在Vue3中，将数据传递到弹出层（通常称为模态框、对话框或警告框等）并在关闭时反向填充原组件的状态，可以利用Vuex状态管理或自定义事件。以下是两种常见的方法：

1. **Vuex**: 如果数据需要在整个应用中共享，并且需要在关闭弹窗后更新全局状态，可以使用Vuex来存储这个临时的数据。首先，在Vuex store中创建一个状态，然后在触发弹窗时通过`this.$store.dispatch()`将数据推送到store。在关闭弹窗时，从store中取出数据并更新组件。

// 弹窗组件内
methods: {
    openModal(data) {
        this.modalData = data;
        this.$store.dispatch('setModalData', data);
    },
    closeModal() {
        const updatedData = this.$store.state.modalData; // 获取最新状态
        // 更新组件内部状态或其他操作...
        this.modalData = null; // 清空数据防止内存泄露
    }
}

// Vuex store actions
actions: {
    setModalData({ commit }, data) {
        commit('SET_MODAL_DATA', data);
    }
}

2. **自定义事件**：如果你只需要在当前组件间通信，可以使用自定义事件如`v-model`绑定一个`emit`函数，关闭弹窗时`emit`更新原始数据。

<!-- 弹窗组件 -->
<template>
  <div v-if="modalVisible">
    <!-- ... -->
    <button @click="closeModal">关闭</button>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    closeModal() {
      this.$emit('update:data', this.modalData); // 发送事件更新父组件
      this.modalVisible = false; // 关闭弹窗
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <button @click="openModal">打开弹窗</button>
    <popup :data.sync="modalData"></popup> <!-- 使用sync修饰符同步数据 -->
  </div>
</template>