Vue3 配合 Bootstrap-vue 开发时如何定位事件的触发源？

旧方案event.target.__vue__.$parent.$options._componentTag依赖Vue和Bootstrap Vue的内部私有属性，这类属性不属于对外暴露的公共API，组件实现迭代时随时可能被移除或修改，b-form-radio-group这类分组组件未暴露_componentTag属性是正常情况。

• 方案1：自定义属性标识（通用性最高，无私有属性依赖）
  给所有需要识别的目标组件添加自定义data-*属性，示例如下：

  <b-form-radio-group data-component-tag="b-form-radio-group" @change="handleEvent">
    <!-- 选项内容 -->
  </b-form-radio-group>
  

  事件触发后直接通过DOM的closest方法向上溯源读取标识：

  const handleEvent = (e) => {
    const sourceTag = e.target.closest('[data-component-tag]')?.dataset.componentTag
    if (sourceTag === 'b-form-radio-group') {
      // 匹配到来源为单选框分组组件
    }
  }
  

• 方案2：事件透传标识（最稳定，无DOM溯源成本）
  给组件绑定事件时直接透传来源标识，不需要从事件对象反向解析：

  <b-form-input @change="handleEvent($event, 'b-form-input')" />
  <b-form-radio-group @change="handleEvent($event, 'b-form-radio-group')" />
  

  处理函数直接读取传入的标识即可：

  const handleEvent = (e, sourceTag) => {
    if (sourceTag === 'b-form-radio-group') {
      // 对应逻辑处理
    }
  }
  

• 方案3：利用组件内置类名溯源（无需修改组件定义，适合存量代码排查）
  Bootstrap Vue的所有组件根元素都会自带对应组件名的类名，可通过类名匹配判断来源：

  const handleEvent = (e) => {
    const isRadioGroupSource = !!e.target.closest('.b-form-radio-group')
    if (isRadioGroupSource) {
      // 匹配到来源为单选框分组组件
    }
  }
  

注意：所有直接访问__vue__、_componentTag这类前缀带_的属性的方法都属于私有属性调用，不推荐在生产环境使用，版本升级后极大概率出现兼容问题

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