vue的click直接写事件,vue中@click是什么意思
本文主要介绍了vue函数@click.prevent的使用分析，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
@click.prevent的用法@ click . prevent的作用是什么？@click.stop和@ click . prevent @ click . stop @ click . prevent
@click.prevent的使用
背景：vue项目运行中遇到@click.prevent函数，场景比较特殊(项目有自己打包的组件库，所以统一集成了所有样式。如遇特殊情况，部分组件需要重新调整样式，所以使用@click.prevent)。
@click.prevent的作用是什么？
注：@click.prevent是vue的内置功能，vue中的其他很多功能也有丰富的应用场景。这篇博文只对@click.prevent进行了阐述，其他功能可以自行查阅相关资料。
解决方案：@click.prevent函数将阻止触发dom的原始事件，而是执行特定的事件。
为了更好的理解@click.prevent函数，下面介绍一个在项目中使用的例子，以供参考：
！样本
//编码.
class= img-control v-show= true @ click . prevent= go xxxx()修改/a
！-
解析：
标签默认有自己的href属性，触发标签后会自动跳转到对应的链接地址或者执行的函数。
这里为了嵌套和避免风格调整，使用了A标签进行处理。但是为了避免A标签的属性限制，使用@click.prevent函数来阻止默认操作。
(我想在这里做一些延伸解释，但目前能给出很好解释的案例并不多。稍后我会更新它们，目前就这些。)
-
Vue还有几个常用的函数，比如：@keyup.enter(回车事件)等等。
@click.stop与@click.prevent
@click.stop
问：一个click事件被添加到父元素，click事件也被添加到它下面的子元素。此时我想点击子元素来获取子元素的click事件，却触发了父元素的事件：
view class= footer-box @ click= click card
view @ click= footer click( like ) text class= footer-box _ _ item like/text/view
view @ click= footer click( comments ) text class= footer-box _ _ item comments/text/view
view @ click= footer click( share ) text class= footer-box _ _ item share/text/view
/查看
此时，我们需要使用@click.stop: stop事件冒泡方法来解决这个问题：
view class= footer-box @ click= click card
view @ click . stop= footer click( like ) text class= footer-box _ _ item like/text/view
view @ click . stop= footer click( comments ) text class= footer-box _ _ item comments/text/view
view @ click . stop= footer click( share ) text class= footer-box _ _ item share/text/view
/查看
@click.prevent
还有一种类似的方法：@click.prevent:阻塞事件的默认行为，比如：在代码中写一个A标签，点击它就会跳转到目标链接网页：
view class=example-body
a href= 3358 www . Baidu . com rel= external no follow rel= external no follow Baidu/a
/查看
但是如果我们不希望它跳转但是仍然希望使用A标记，那么我们需要使用@click.prevent方法：
view class=example-body
a href= 3358 www . Baidu . com rel= external nofollow rel= external nofollow @ click . prevent= not link Baidu/a
/查看
此时，当你再次点击A标签页时，你不会跳转到目标地址链接。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。