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

「爱情、让人受尽委屈。」 2022-11-21 11:33 956阅读 0赞

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

子组件函数：

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

父组件函数：

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

*当点击子组件时，会先触发子组件，再触发父组件：
在这里插入图片描述
*而当点击父组件时，只会单纯地触发父组件：
在这里插入图片描述

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

在这里插入图片描述

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

发表评论

表情：
评论列表 （有 0 条评论，956人围观）

还没有评论，来说两句吧...

相关阅读