vue函数@click.prevent怎么使用

这篇文章主要介绍"vue函数@click.prevent怎么使用"，在日常操作中，相信很多人在vue函数@click.prevent怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue函数@click.prevent怎么使用"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

@click.prevent的使用

背景 ：vue项目操作中遇到@click.prevent函数，场景特殊（项目中有一个自己封装的组件库，因此所有的样式都统一集成，遇到特殊情况想引入特殊UI风格处理时，部分组件需要样式重调，因此用到@click.prevent）特此纪要。

@click.prevent的作用是什么？

说明：@click.prevent属于vue的内置函数，vue中有很多其他的函数也有很丰富的应用场景，此篇博文思虑再三，仅对@click.prevent进行阐述，有关其他的函数了解，可自行查阅相关资料。

解决方案：@click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件。

为了更好的理解@click.prevent函数，引入一个项目中的使用样例以供参考：

  // Codding...  修改

vue还有几个常用的函数，如：@keyup.enter（enter回车事件）等等。

@click.stop与@click.prevent

@click.stop

问题：父元素中添加了一个click事件，其下面的子元素中也添加了click事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件：

        喜欢        评论        分享

此时，我们就需要使用@click.stop：阻止事件冒泡方法来解决这个问题：

        喜欢        评论        分享

@click.prevent

还有一个与之相似的方法：@click.prevent：阻止事件的默认行为，例如：在代码里写入一个a标签，点击会跳转到目标链接网页中：

    百度

但如果我们不想让它跳转但还想使用a标签的话，此时就需要使用@click.prevent方法：

    百度

这时再点击a标签的时候就不会跳转目标地址链接了。

到此，关于"vue函数@click.prevent怎么使用"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！