关于@click.native中 .native 的含义与使用方式
更新时间：2022年10月15日 10:38 点击：961 作者：小鱼儿同学啦
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：鼠标移动
以上为个人经验，希望能给大家一个参考，也希望大家多多支持猪先飞。
原文出处：https://blog.csdn.net/weixin_41829477/article/details/104938
上一篇: vue中关于click.stop的用法
下一篇: Vue组件上使用v-model之单选框
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误，本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程（安卓部分）为例，给大家分析 React Native 的启动流程，需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了@Query注解的原生用法和native用法解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-08-27
- 路由管理的功能主要指的页面跳转、goBack、带参数跳转等功能,这篇文章主要给大家介绍了关于React Native自定义路由管理的相关资料,需要的朋友可以参考下...2021-08-04
- native是与C++联合开发的时候用的！使用native关键字说明这个方法是原生函数，也就是这个方法是用C/C++语言实现的，并且被编译成了DLL，由java去调用。本文给大家介绍java 中native方法使用，感兴趣的朋友一起看看吧...2020-09-16
详解Flutter 调用 Android Native 的方法
这篇文章主要介绍了详解Flutter 调用 Android Native 的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-25- 本文记录如何使用vscode打造一个现代化的react-native开发环境，旨在提高开发效率和质量。本文给大家分享我遇到的问题及解决方法，感兴趣的朋友跟随小编一起看看吧...2021-07-07
- 这篇文章主要介绍了spring cloud 配置中心native配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-25
- 今天给大家分享的是使用React Native制作一个简单的游戏，这个游戏可以跨平台操作，本文通过实例图文相结合给大家介绍的非常详细，对React Native游戏相关知识感兴趣的朋友一起看看吧...2021-05-27
- 许多朋友遇到React Native 无法链接模拟器的问题，怎么解决呢，本文给大家分享完整简便解决方法及配置例题，对React Native 链接模拟器相关知识感兴趣的朋友一起看看吧...2021-06-22
- 这篇文章主要介绍了React Native实现登录功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-10-03
- 这篇文章主要介绍了搭建React Native热更新平台,要实现ReactNative热更新功能，有四种思路CodePush、Pushy、Expo和自研，感兴趣的朋友一起通过本文学习吧...2022-05-25
关于@click.native中 .native 的含义与使用方式
这篇文章主要介绍了关于@click.native中 .native 的含义与使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2022-10-15- 这篇文章主要介绍了Vue如何给组件添加点击事件 @click.native，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2022-10-15
- 这篇文章主要为大家介绍了ReactNative中实现确认码组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪...2022-08-08
- 这篇文章主要介绍了在netty中使用native传输协议,这里我们只以Kqueue为例介绍了netty中native传输协议的使用，需要的朋友可以参考下...2022-05-26
- 这篇文章主要介绍了Java中的Native方法，在本文中，我们将看到java中本机native方法的介绍。我们将看到它的基本语法及其工作原理。将有java代码示例展示native本机方法的使用，下面来看看文章的具体介绍...2021-12-22