Vue 事件中的 .native你搞明白了吗
native是什么？
.native - 监听组件根元素的原生事件。
主要是给自定义的组件添加原生事件。
官网的解释：
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click.native="clickFn">按钮</button>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
clickFn () {
console.log('点击按钮了')
}
}
})
</script>
</body>
</html>此时点击页面中的按钮无任何反应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<card @click.native="clickFn">按钮</card>
</div>
<script src='vue.js'></script>
<script>
Vue.component('card',{
template:'<p>这是card组件<button>按钮</button></p>'
})
new Vue({
el:'#app',
data:{
state:false
},
methods:{
clickFn (e) {
console.log(e) //打印出MouseEvent对象
if (e.target.nodeName === 'IMG') { // 可以对点击的target标签进行判断
this.dialogImageUrl = file.target.src
this.dialogVisible = true
}
}
}
})
</script>
</body>
</html>总结： .native - 主要是给自定义的组件添加原生事件，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
补充：vue中'. native'修饰符的使用
官网的解释：
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触 发的。
此时点击页面中的按钮无任何反应。
添加修饰符：
此时点击就会弹窗：
可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
到此这篇关于vue 事件中的 .native你搞清楚了吗的文章就介绍到这了,更多相关vue 事件.native内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于如何解决vue3报错:找不到模块或其相应的类型声明的相关资料,这个错误提示是指在代码中引用了Vue模块,但是系统找不到该模块或者缺少相应的类型声明文件,需要的朋友可以参考下2023-07-07
本文主要介绍了Element框架el-tab点击标签页时再渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
父子组件通信是Vue中常见的场景,这篇文章主要为大家详细介绍了vue中父子组件相互传值的实现方法,文中的示例代码讲解详细,需要的小伙伴可以参考一下2023-12-12
ResizeObserver loop limit exceeded报错原因及解决方案
这篇文章主要给大家介绍了关于ResizeObserver loop limit exceeded报错原因及解决的相关资料,公司项目监听系统中发现一个高频错误ResizeObserver loop limit exceeded,而浏览器的console中却没有提示,需要的朋友可以参考下2023-09-09
vue项目无论是用element中的Select选择器,还是使用公司维护的组件,都可以轻松实现单选和多选的需求,这篇文章主要给大家介绍了关于Vant弹出列表多选输入框下拉选择的相关资料,需要的朋友可以参考下2024-01-01
vue-cli项目代理proxyTable配置exclude的方法
今天小编就为大家分享一篇vue-cli项目代理proxyTable配置exclude的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue实现跨域的方法,结合实例形式分析了vue.js跨域的原理与相关实现技巧,需要的朋友可以参考下2019-05-05
element ui时间日期选择器el-date-picker报错Prop being mutated:"
在日常开发中,我们会遇到一些情况,限制日期的范围的选择,下面这篇文章主要给大家介绍了关于element ui时间日期选择器el-date-picker报错Prop being mutated: "placement"的解决方式,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了详解搭建一个vue-cli的移动端H5开发模板，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要给大家介绍了关于Vite内网ip访问的2种配置方式,文中通过实例代码介绍的非常详细,对大家学习或者使用Vite具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
最新评论