Vue中@click.stop与@click.prevent、@click.native使用
更新时间：2024年08月16日 17:18:52 作者：迷惑的Jack
这篇文章主要介绍了Vue中@click.stop与@click.prevent、@click.native使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
@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" rel="external nofollow" >百度</a> </view>
但如果我们不想让它跳转但还想使用a标签的话，此时就需要使用@click.prevent方法：
这时再点击a标签的时候就不会跳转目标地址链接了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue-extend和VueComponent问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue使用WebSocket模拟实现聊天功能,通过创建node服务和server.js文件实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下2021-08-08
本篇文章主要介绍了浅谈Vue下使用百度地图的简易方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue 清空input标签 中file的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue中transition单个节点过渡与transition-group列表过渡全过程
这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vant是一个专为移动端设计的轻量级组件库,自2017年开源以来,提供了Vue2、Vue3及多平台版本支持,安装Vant时需要注意版本兼容问题,Vue3项目应安装最新版Vant3,而Vue2项目则需安装Vant2,安装错误时,需卸载后重新安装正确版本2024-10-10
在 Vue.js 中,使用 v-for 指令进行数据渲染时,有时会遇到渲染顺序混乱的问题,这种问题主要与 Vue 的响应式系统、DOM 更新机制以及数组的变更方法有关,以下是对这一现象的深入分析及解决方案,需要的朋友可以参考下2025-01-01
这篇文章主要给大家介绍了利用Vue.js仿微信过渡动画左右切换效果的相关资料，需要用到的技术栈是Vue+Vuex。文中通过示例代码介绍的非常详细，对大家具一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要介绍了vue仓库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
vue3 process.env.XXX环境变量不生效的解决方法
这篇文章主要给大家介绍了关于vue3 process.env.XXX环境变量不生效的解决方法,通过文中介绍的方法可以很方便的解决遇到的问题,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
最新评论