@click.native.prevent

已于 2023-04-06 10:52:19 修改
阅读量2.1k 收藏 3
点赞数 2
分类专栏： 封装 文章标签： javascript 前端 react native
于 2021-12-03 11:29:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seimeii/article/details/121694814
版权
本文详细解析了Vue中@click.native.prevent.stop.self.once修饰符的作用，阐述了如何在组件中正确绑定事件以及它们各自的用途。`native`用于在封装组件上监听原生事件，`prevent`阻止默认行为，`stop`阻止事件冒泡，`self`确保只有触发元素自身才执行回调，`once`则确保事件只执行一次。这些修饰符在构建复杂组件交互时尤其关键。
摘要由CSDN通过智能技术生成

1、加native作用

为了让点击事件生效

元素中绑定了这个事件

<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>

1、在封装好的组件上使用，所以要加上.native才能click。
2、prevent是用来阻止默认的事件。就相当于…event.preventDefault()，父组件想在子组件上监听自己的click的话，需要加上native修饰符。
3、一般来说，引用自定义或第三方组件所绑定的事件名都会来自子组件，包括click这种看似默认点击事件的名称。
这是如果直接给父组件绑定@click，子组件没有传click方法过来，那么这个看似click的点击事件将不会执行。

2、@click.native .prevent .stop .self .once

各种修饰符区别

都挺好，刚刚好
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 按键修饰符处理事件的方法
08-27
Vue 按键修饰符处理事件的方法 Vue 按键修饰符是 Vue 框架中的一种特殊处理事件的方法，它允许开发者轻松地处理键盘事件，无需关心 keyCode 的值。 Vue 按键修饰符主要分为两大类：按键别名和系统修饰键。...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
同时，Vue提供的其他事件修饰符如`.prevent`, `.capture`, `.self` 和 `.once`也是解决此类问题的强大工具，可以根据具体需求灵活运用。理解并熟练使用这些修饰符，能帮助开发者更好地控制和管理Vue应用中的事件行为...
vue @click和 @click.native.prevent 区别
Z_Gleng的博客
04-10 1900
@click是用在按钮上的语法糖 而@click.native是给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 prevent是用来阻止默认的事件。就相当于…event.preventDefault()，父组件想在子组件上监听自己的click的话，需要加上native修饰符。 这里说说默认事件 默认事件就是默认执行的事件，比如a标签，点击a标签，页面会自动跳转 ...
vue组件添加事件@click.native操作
01-21
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) <Item xss=removed></Item> 补充知识：vue——组件间（兄弟组件间）事件派发与接收 法一 main.js 在初始化vue之前，给 data 添加一个名为 event 的空vue对象 new Vue({ render: h => h(App), router, store, data: { event: ne
@click-native-prevent
热门推荐
caimaomaocai的博客
07-25 2万+
看到这个@click.native.prevent有点懵逼， 然后查了点资料，还是零零散散的资料。。自己总结一下   1.在封装好的组件上使用，所以要加上.native才能click 2.prevent就相当于..event.preventDefault()   所以@submit.native.prevent是用来阻止默认行为的 ;...
vue中touch和click共存的解决方式
11-20
`@touchstart.prevent`和`@touchend.prevent`分别用于阻止`touchstart`和`touchend`的默认行为，确保它们不会影响到`click`事件。 ```html <div class="comment-text" @touchstart.prevent="gtouchstart(XXX)" @...
前端Vue面试题.docx
03-30
为自定义组件添加原生点击事件`clickMe`，可以使用`@click.native="clickMe"`。 13. 父组件与子组件的交互： 父组件通过`slot`来传递内容给子组件。`<a-slot>`和`<b-slot>`是自定义的槽，`<a-slot>`中有两个插槽`...
第七课 进阶指令1
08-03
- 事件修饰符如 `.stop`, `.prevent`, `.once`, `.capture`, `.self` 和 `.native` 提供了更便捷的方式来处理事件。例如： ```html <a @click.stop="fn1"></a> <!-- 阻止事件冒泡 --> <button @click.stop....
Vue3 Element Plus表格导入导出示例
最新发布
07-15
<el-button type="primary" native-type="submit">导入 export default { methods: { handleFileChange(e) { const file = e.target.files[0]; if (file.type !== 'text/csv') { alert('请上传CSV文件');...
MobaXterm Pro 11.0.3816
11-20
New feature: native integration of WSL (Windows Subsystem for Linux) into MobaXterm – run WSL into MobaXterm advanced terminal instead of Windows console and run graphical applications thanks to Moba...
前端大厂最新面试题-modifier.docx
06-06
Vue 修饰符详解 在 Vue 中，修饰符是一种用于限定类型以及类型成员的声明符号，处理了许多 DOM 事件的...因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
vue+vuex+axios实现登录、注册页权限拦截
08-27
" :loading="loading" @click.native.prevent="handleLogin"> 登录 export default { name: 'login', data() { const validateUsername = (rule, value, callback) => { if (value.trim().length ) ...
vue中@click.native.prevent说明
qq_26993175的博客
09-22 1万+
元素中绑定了这个事件 <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button> 1、在封装好的组件上使用，所以要加上.native才能click。 2、prevent是用来阻止默认的事件。就相当于…event.preventDefault()，父组件想在子组件上监听自己的cl
@click.prevent.native作用
qq_52915594的博客
06-10 1086
@click.prevent.native作用 vue语法
@click.native.prevent解答
qq_39874538的博客
05-26 1119
@click:绑定按下事件 native:在组件的标签中使用，否则@click会被视作从监听的是来着组件的自定义事件 例如:router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用native,事件是不会触发的。此时加上.native，才会触发事件。 prevent:阻止默认事件 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

都挺好，刚刚好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值