VueJS奇怪$emit行为：自定义事件从非预期组件触发问题

• 核心原因是全局变量污染：你在device-showcurrent组件的mounted钩子中直接写instance = this，没有用let/const/var声明变量，这会导致instance被自动注册为window下的全局变量。如果bootstrap-table组件的内部代码也用了同样的无声明赋值写法，全局的instance会被覆盖为bootstrap-table的组件实例。等到模态框触发hide.bs.modal事件时，回调里执行的instance.$emit实际是调用bootstrap-table实例的emit方法，自然事件就会从bootstrap-table组件抛出。
• 次要排查方向：如果确认不存在全局变量污染，可以检查device-showcurrent的模态框DOM是否被意外挂载到了bootstrap-table的DOM树内部，且bootstrap-table做了自定义事件的转发处理，不过该场景出现概率极低。

你当前的代码其实完全不需要额外定义instance变量：事件回调已经用了箭头函数，this默认指向当前组件实例，直接修改成以下代码即可：

mounted: function(){
    // 该ID在组件创建时生成，运行正常，已确认该JQuery事件可正常触发
    $(`#${this.randomID}`).on('hide.bs.modal', e => {
        this.$emit('modal-close')
    })
}

如果确实需要跨作用域存储组件实例，一定要用块级作用域声明变量，避免污染全局命名空间：

mounted: function(){
    const instance = this // 加const声明为局部变量
    $(`#${this.randomID}`).on('hide.bs.modal', e => {
        instance.$emit('modal-close')
    })
}

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