VueJS全局模态窗口如何通过事件emit实现跨组件通信？

项目中基于Pinia Store实现的全局模态窗口组件已稳定运行两个月，此前仅处理无需访问外部响应式变量的表单场景。当前需扩展组件能力，实现模态内组件与外部父组件的事件通信，同时希望规避两种方案：

• 不推荐直接传递函数作为props
• 避免使用冗余的全局状态

1. 扩展Pinia Modal Store #

在原有Store中新增emitHandlers字段，用于存储父组件传递的事件处理函数，作为事件通信的中转层：

import { defineStore } from "pinia";
import { ref } from "vue";
import { markRaw } from "vue";

const defaultState = { 
  component: null, 
  props: {},
  emitHandlers: {} // 新增：存储事件处理映射
};

export const useModalStore = defineStore("modal", () => {
  const modalState = ref(defaultState);

  const openModal = ({ component, props, emitHandlers }) => {
    modalState.value = { 
      component: markRaw(component), 
      props: props || {},
      emitHandlers: emitHandlers || {} // 接收父组件传入的事件处理
    };
  };

  const closeModal = () => {
    modalState.value = defaultState;
  };

  return { modalState, openModal, closeModal };
});

2. 修改全局Modal组件 #

在动态渲染的模态组件上，通过v-on绑定emitHandlers，实现事件的转发：

<script setup>
import { useModalStore } from "@stores/ModalStore";
import { storeToRefs } from "pinia";

const { closeModal } = useModalStore();
const { modalState } = storeToRefs(useModalStore());
</script>

<template>
  <Teleport to="#modals">
    <Transition name="modal-window-transition">
      <div
        class="modal-window__wrapper"
        @click.self="closeModal"
        v-if="modalState?.component"
      >
        <div class="modal-window">
          <component 
            :is="modalState?.component" 
            v-bind="modalState?.props"
            v-on="modalState.emitHandlers" <!-- 绑定事件处理映射 -->
          />
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

3. 父组件传递事件处理逻辑 #

在打开模态时，通过emitHandlers参数传入对应事件的处理函数：

<script setup>
import { useModalStore } from "@stores/ModalStore";
import { ref } from "vue"

import ModalContent from "@components/ModalContent.vue";

const { openModal } = useModalStore();
const parentValue = ref("update me via modal")

// 定义事件处理函数
const handleUpdateParentState = () => {
  parentValue.value = "Updated from modal!";
  // 可选：处理完事件后关闭模态
  // closeModal();
}
</script>

<template>
  <p>{{ parentValue }}</p>
  <button @click="openModal({
    component: ModalContent,
    emitHandlers: {
      updateParentState: handleUpdateParentState
    }
  })">打开模态</button>
</template>

4. 模态内组件保持原有emit逻辑 #

模态内组件无需额外修改，正常通过defineEmits声明并触发事件即可：

<script setup>
const emit = defineEmits(['updateParentState'])
</script>

<template>
  <button @click="emit('updateParentState')">更新父组件值</button>
</template>

• 规避了直接传递函数作为props的争议性实践，通过Pinia中转事件逻辑，契合全局模态的架构设计
• 无需新增冗余全局状态，仅扩展现有Store字段，保持代码简洁性
• 事件通信逻辑清晰，父组件明确声明要处理的模态事件，模态组件专注自身业务逻辑

内容的提问来源于stack exchange，提问作者Bram Mortier