背景 

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

问题

@click.prevent的作用是什么?

说明

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

解决方案

@click.prevent函数会阻止触发dom的原始事件,而去执行特定的事件。为了更好的理解@click.prevent函数,引入一个项目中的使用样例以供参考:

<!-- 样例 -->
  // Codding...
  <a class="img-control" v-show="true" @click.prevent="goXxxx()">修改</a>
<!-- 
    解析:
        a标签默认有自己的href属性,触发a标签后他会自动跳转对应的链接地址或执行的函数。
        此处为了嵌套,避免调整样式所以引用了a标签来处理,但又为了避免a标签的属性限制,因此引用了@click.prevent函数阻隔默认的操作。
        (此处还想做一些延伸说明,但目前没有太多的案例来很好的说明,后续再做更新,目前只到这里)
 -->

vue还有几个常用的函数,如:@keyup.enter(enter回车事件)等等。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐