Vue中触发子组件的事件时如何阻止父组件的事件的触发(阻止冒泡事件)的分析与解决

这有一个父子组件,如下:在这里插入图片描述

子组件函数:

deleteClass (classId) {
     
         console.log(2);
        }

父组件函数:

getMession (item) {
     
            console.log(1);
        }

*当点击子组件时,会先触发子组件,再触发父组件:
在这里插入图片描述
*而当点击父组件时,只会单纯地触发父组件:
Vue中触发子组件的事件时如何阻止父组件的事件的触发(阻止冒泡事件)的分析与解决_第1张图片

解决办法:将子组件的事件改成@click.stop=="deleteClass(item)"

在这里插入图片描述

当我们再次点击子组件时,只会触发子组件,不会再触发父组件:在这里插入图片描述

你可能感兴趣的:(vue实战,vue)