Vue中@click.stop与@click.prevent、@click.native

在组件中时常看到@click.native。在项目中遇到后，简单介绍下：
@click.native是给组件绑定原生事件

我的标签 ‘ListCell’ 是子组件引到当前父组件
因为当父组件中引入子组件的时候，当要触发子组件点击事件的时候@click 不生效。
有两种解决方式
1.@click.native
2.在子组件中添加this.$emit ( “事件名” ，value )方法将子组件的值传到父组件。

<div id="app"><div v-on:click="dodo"><button v-on:click="doThis">阻止单击事件继续传播</button></div></div><script>var app = new Vue({el: "#app",data: {name: "Vue.js"},methods: {doThis: function () {alert("dothis");},dodo: function () {alert("dodo");}}});</script>

这样的话，会先弹出dothis 在弹出dodo,
如果用@click.stop的话

<div id="app"><div v-on:click="dodo"><button v-on:click.stop="doThis">阻止单击事件继续传播</button></div></div><script>var app = new Vue({el: "#app",data: {name: "Vue.js"},methods: {doThis: function () {alert("dothis");},dodo: function () {alert("dodo");}}});</script>

这样的话，只会弹出dothis

@click.stop

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

<view class=“footer-box” @click=“clickCard”>
<view @click=“footerClick(‘喜欢’)”>喜欢
<view @click=“footerClick(‘评论’)”>评论
<view @click=“footerClick(‘分享’)”>分享

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

<view class="footer-box" @click="clickCard"><view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view><view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view><view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

@click.prevent

还有一个与之相似的方法：

@click.prevent

：阻止事件的默认行为，例如：在代码里写入一个a标签，点击会跳转到目标链接网页中：

<view class="example-body"><a href="http://www.baidu.com">百度</a>
</view>

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

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

Vue中@click.stop与@click.prevent、@click.native相关推荐

VUE中a标签里调用v-on:click发送axios请求
主要用于实现下载.导出功能.后端传递流,而不是blob对象. <a>标签的href不为false,且绑定的click向后台发送axios请求实现. 这里使用@click不启作用. 调用顺序 ...
2021年在vue中使用 Google Map
目前在vue中使用google map有以下两种方法: 一.使用 JavaScript 创建地图实例该方法优点在于可配置项多,方便自定义,缺点是较复杂,且文档为英文,有一定学习难度. 在开始之前确保 ...
vue中使用google地图（自定义label、信息窗口）
最近公司爱尔兰项目需要使用google地图,项目还是用vue写的,那我就寻思找个vue能用的google地图的插件吧,找了vue2-google-maps,这个插件确实还行,而且github上还有ap ...
Vue中的事件修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
vue中8种组件通信方式,纯干货！值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
Vue中使用animate.css
最近把公司官网项目依赖进行了升级,里面用到了animate.css.目前版本4.1.0. 目前4.x版本相比之前3.x的breaking change如下: Animate.css v4 brough ...
Vue中组件之间8中通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
Vue中使用form表单提交刷新问题
vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 &l ...

Vue中@click.stop与@click.prevent、@click.native

Vue中@click.stop与@click.prevent、@click.native相关推荐

最新文章

热门文章