Angular嵌套组件中CustomEvent传递selectedRows失败求助

• 确认事件监听绑定时机与正确性
  父组件（Milestone/Dashboard）必须在Table组件挂载完成后，给对应DOM元素绑定事件监听，比如在mounted钩子中执行：

  this.$refs.tableRef.nativeElement.addEventListener('selected-rows-update', this.handleRowSelect)
  

  注意事件名称要和CustomEvent的命名完全一致，大小写敏感，不能出现拼写错误。

• 检查CustomEvent初始化参数
  必须把selectedRows放入detail属性，同时开启bubbles: true保证事件能向上冒泡，示例代码：

  const rowEvent = new CustomEvent('selected-rows-update', {
    detail: this.selectedRows,
    bubbles: true,
    cancelable: true
  })
  

  若Table组件用了Shadow DOM，还需添加composed: true，否则事件会被组件边界拦截。

• 验证dispatchEvent的调用对象与时机
  确保调用dispatchEvent的是组件根元素（this.$el）或已正确获取的DOM节点，调用前可先console.log(this.$el)确认元素存在；同时要在selectedRows数组更新后再触发事件，比如放在watch监听selectedRows的回调里，避免在数据未更新时触发。

• 排查事件冒泡是否被阻断
  检查Table组件或父组件的事件逻辑中，是否存在event.stopPropagation()调用，该方法会直接打断事件冒泡流程，导致父组件无法接收事件。

• 精准调试定位问题
  在Table组件触发事件前，先console.log('待传递数据:', this.selectedRows)确认数据有效；在父组件的事件回调第一行就console.log('接收到事件:', event.detail)，如果回调未触发，说明事件未绑定/未冒泡；如果回调触发但detail为空，说明数据传递环节出错。

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