Angular中使用EventEmitter & Output打开模态框的问题

嘿，我懂你说的这种感觉！掌握组件间通信确实能让开发顺畅太多，尤其是兄弟组件之间的联动。针对你说的表格组件触发事件传userId、模态框监听接收的需求，我给你两种实战常用的实现方案：

方案一：父组件做中间桥梁（最推荐，清晰易维护） #

这种方法是让父组件作为两个子组件的“中转站”，逻辑直观，后续排查问题也方便。

步骤拆解 #

• 表格子组件：点击按钮时，向父组件触发自定义事件并携带userId
• 父组件：监听这个事件，把userId存到自己的状态里，同时可以控制模态框的显示
• 模态框子组件：通过props接收父组件的userId，或者监听props变化执行后续逻辑

Vue2 代码示例

表格子组件（TableComponent.vue）

<template>
  <table>
    <tr v-for="item in userList" :key="item.id">
      <td>{{ item.name }}</td>
      <td><button @click="handleSelectUser(item.id)">操作</button></td>
    </tr>
  </table>
</template>

<script>
export default {
  props: ['userList'],
  methods: {
    handleSelectUser(userId) {
      // 向父组件触发自定义事件，传递选中的userId
      this.$emit('user-selected', userId)
    }
  }
}
</script>

模态框子组件（ModalComponent.vue）

<template>
  <div v-if="isVisible" class="modal-container">
    <h3>用户详情</h3>
    <p>选中的用户ID：{{ selectedUserId }}</p>
    <!-- 这里放你的模态框业务逻辑 -->
  </div>
</template>

<script>
export default {
  props: ['selectedUserId', 'isVisible'],
  watch: {
    // 监听userId变化，拿到后执行你需要的逻辑
    selectedUserId(newUserId) {
      if (newUserId) {
        console.log('拿到用户ID啦，开始干活：', newUserId)
        // 比如调用接口获取用户详情、初始化表单等
      }
    }
  }
}
</script>

父组件（ParentComponent.vue）

<template>
  <div class="parent-container">
    <TableComponent :userList="userData" @user-selected="handleUserSelected" />
    <ModalComponent :selectedUserId="currentUserId" :isVisible="modalShow" />
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'
import ModalComponent from './ModalComponent.vue'

export default {
  components: { TableComponent, ModalComponent },
  data() {
    return {
      userData: [/* 你的用户列表数据 */],
      currentUserId: null,
      modalShow: false
    }
  },
  methods: {
    handleUserSelected(userId) {
      // 存下选中的userId
      this.currentUserId = userId
      // 打开模态框
      this.modalShow = true
    }
  }
}
</script>

Vue3 代码示例（Composition API）

表格子组件（TableComponent.vue）

<template>
  <table>
    <tr v-for="item in userList" :key="item.id">
      <td>{{ item.name }}</td>
      <td><button @click="handleSelectUser(item.id)">操作</button></td>
    </tr>
  </table>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 接收父组件传的用户列表
const props = defineProps(['userList'])
// 定义要触发的自定义事件
const emit = defineEmits(['user-selected'])

const handleSelectUser = (userId) => {
  emit('user-selected', userId)
}
</script>

模态框子组件（ModalComponent.vue）

<template>
  <div v-if="isVisible" class="modal-container">
    <h3>用户详情</h3>
    <p>选中的用户ID：{{ selectedUserId }}</p>
  </div>
</template>

<script setup>
import { defineProps, watch } from 'vue'

const props = defineProps(['selectedUserId', 'isVisible'])

// 监听userId变化
watch(() => props.selectedUserId, (newUserId) => {
  if (newUserId) {
    console.log('获取到用户ID：', newUserId)
    // 执行你的业务逻辑，比如请求用户详情
  }
})
</script>

父组件（ParentComponent.vue）

<template>
  <div class="parent-container">
    <TableComponent :userList="userData" @user-selected="handleUserSelected" />
    <ModalComponent :selectedUserId="currentUserId" :isVisible="modalShow" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TableComponent from './TableComponent.vue'
import ModalComponent from './ModalComponent.vue'

const userData = ref([/* 用户列表数据 */])
const currentUserId = ref(null)
const modalShow = ref(false)

const handleUserSelected = (userId) => {
  currentUserId.value = userId
  modalShow.value = true
}
</script>

方案二：事件总线（适合简单场景） #

如果你的项目比较小，或者不想通过父组件中转，也可以用事件总线实现兄弟组件直接通信。不过复杂项目里不推荐，因为事件追踪起来比较麻烦。

Vue2 实现 #

1. 先在main.js里注册全局事件总线：

import Vue from 'vue'
Vue.prototype.$bus = new Vue()

2. 表格子组件触发事件：

handleSelectUser(userId) {
  this.$bus.$emit('user-selected', userId)
}

3. 模态框子组件监听事件（记得销毁监听避免内存泄漏）：

mounted() {
  this.$bus.$on('user-selected', (userId) => {
    this.selectedUserId = userId
    this.isVisible = true
    // 执行你的逻辑
  })
},
beforeDestroy() {
  this.$bus.$off('user-selected')
}

Vue3 实现（用mitt库） #

1. 先安装mitt：npm install mitt
2. 创建一个bus.js文件：

import mitt from 'mitt'
const emitter = mitt()
export default emitter

3. 表格子组件触发事件：

import emitter from './bus.js'

const handleSelectUser = (userId) => {
  emitter.emit('user-selected', userId)
}

4. 模态框子组件监听事件：

import emitter from './bus.js'
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  emitter.on('user-selected', (userId) => {
    // 处理逻辑
  })
})

onUnmounted(() => {
  emitter.off('user-selected')
})

总结一下，父组件中转的方案更适合大多数场景，代码结构清晰，后续维护和扩展都更方便。事件总线可以作为小场景的补充选项~

内容的提问来源于stack exchange，提问作者Sandra Willford