关于@click.native中 .native 的含义与使用方式
更新时间：2022年10月13日 16:36:37 作者：小鱼儿同学啦
这篇文章主要介绍了关于@click.native中 .native 的含义与使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue的@click.native问题
.native--侦听组件根元素上的原生事件
- 作用： 给组件绑定原生事件
@click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口
也就是说，在处理DOM原生事件的场合中需要添加额外的标识符
- 比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是不会触发的，因此需要加上 .native 才会触发事件
当你给一个vue组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要
<template>
<div id="app">
<Button @click.native = 'goToNext'>点击跳转</Button>
</div>
</template>
<script>
import Button from '../components/Button'
export default{
components:{
Button
},
data(){
return{
}
}
methods:{
goToNext(){
alert('hello--world')
}
}
}
</script>@click.native.prevent
1.给vue组件绑定事件时候，组件加上.native才能监听原生事件，否则会认为监听的是来自Item组件自定义的事件，
在封装好的组件上使用，所以要加上.native才能click
2.prevent 是用来阻止默认的 ，相当于原生的event.preventDefault()
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。
但父组件想在子组件上监听自己的click的话，需要加上native修饰符
js原生事件类型：
click：单击dblclick：双击mousedown：鼠标按下mouseup：鼠标抬起mouseover：鼠标悬浮mouseout：鼠标离开mousemove：鼠标移动
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue选取本地图片，自定义裁切图片比例 vue-cropper,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了vue3调度器effect的scheduler功能实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了vue如何解决空格和空行报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了如何测量vue应用运行时的性能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
本文主要介绍了element表格变化后自动刷新的两种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
今天小编就为大家分享一篇基于Vue 服务端Cookies删除的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue3 Composition API的使用简介，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-03-03
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue多条件筛选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
在金融类应用中,经常需要将金额从小写数字转换为大写形式,这种转换主要用于正式票据、合同等场合,以增加文本的专业性和可读性,本文将详细介绍如何在Vue.js项目中实现这一功能,并提供多个示例和详细的代码说明,需要的朋友可以参考下2024-09-09
最新评论