Vue 阻止事件冒泡

Vue事件冒泡是什么

事件冒泡是指事件在触发后，从最深的元素开始逐层向上执行事件处理函数，直到最顶层元素。事件冒泡的好处是可以多次处理一个事件，且易于维护和开发

语法详细说明

addEventListener('keyup', this.keyUp,false)

注意第3个参数是冒泡顺序,必须是false,默认也是false

1.使用JavaScript的原生方法

输入框事件

                查询
                确定
            

绑定全局事件

//DOM渲染完成，组件挂载完成
    mounted() {       
        addEventListener('keyup', this.keyUp,false)
        
    },

methods: {       
        inputkey(e) {
            // el-input 回车 
            console.log('sendMsg', e.keyCode);

            e.stopPropagation() // 阻止事件冒泡,不走到keyup
        },       
        keyUp(e) {
            console.log('keyUp', e.keyCode);
        }
}

2.在组件中使用methods和$emit

在子组件中实现了handleClick方法，并通过$emit('click.stop')方法来阻止冒泡传递

3Vue阻止事件冒泡的指令

除了使用@click.stop等修饰符来阻止事件冒泡外，我们还可以使用Vue提供的指令v-on:click.stop来阻止事件冒泡

v-on:click.stop.prevent指令的作用与@click.stop.prevent修饰符相同