Vue事件修饰符native、self示例详解
更新时间：2019年07月09日 17:08:31 作者：Infinity
这篇文章主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
事出有因
之前面试被问到的native和self相关问题，self我觉得自己应该能回答出来，可能被之前一小时的问题整懵逼了。尴尬~~
自己研究了一下，不足之处望补充，相互进步
native
修饰符native，有什么用
- native是原生事件(第一反应，当时没然后了...)
恶补一下
- native 一定是用于自定义组件，也就是自定义的html标签
结合代码说得明白
<body>
<div id="app">
<div class="box" >
<Son @click='handler1'></Son>
</div>
</div>
</body>
<script>
const Son = Vue.component('Son', {
template: '<button @mouseover=handler2 class="box1">son</button>',
methods: {
handler2 (e) {
}
}
})
new Vue({
el: "#app",
components: {
Son
},
data() {
return {
a: 123
}
},
methods: {
handler1 (e) {
console.log('父级')
}
}
})
</script>
注意点
- 当<Son @click='handler1'></Son>，子组件中的this.$listeners返回的是{click: ƒ}，box1的dom上没有绑定click事件（可以打开F12查看），所以这个事件不是原生的click
- 当<Son @click.native='handler1'></Son>，子组件中的this.$listeners返回的是{}，box1的dom上绑定了click事件（可以打开F12查看），所以这个事件是原生的click
- 当<Son @click.self='handler1'></Son>，子组件中的this.$listeners返回的是{click: ƒ}，box1的dom上没有绑定click事件（可以打开F12查看），所以这个事件不是原生的click
- 子组件的this.$emit('eventTpye')是从this.$listeners返回值中查找的
为什么有时候组件点击事件不会生效
猜测
- 子组件html标签没有定义click原生事件
- 子组件没有执行this.$emit('click')
所以
直接.native将事件绑定到子组件html标签上，类似dom.addEventListener('click', handler)
self
作用
引用官方说明
<!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
结合代码说明
<body>
<div id="app">
<div class="box" @click.self='handler1'>
<Son ></Son>
</div>
</div>
</body>
<script>
const Son = Vue.component('Son', {
template: '<button @click=handler2 class="box1">son</button>',
methods: {
handler2 (e) {
console.log(e.target, e.currentTarget)
}
}
})
new Vue({
el: "#app",
components: {
Son
},
data() {
return {
a: 123
}
},
methods: {
handler1 (e) {
console.log(e.target, e.currentTarget)
}
}
})
</script>
就是利用e.target和e.currentTarget，当添加self时，只有当两者相等时才会触发回调
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
相关文章
在vue项目中,有些我们会遇到修改完数据,但是视图却没有更新的情况,具体的场景不一样,解决问题的方法也不一样,在网上看了很多文章,在此总结汇总一下,需要的朋友可以参考下2023-08-08
下面小编就为大家分享一篇vue.js项目打包上线的图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
提起帮助文档，想必大家都会想到 VuePress等。但是VuePress是“静态网站生成器”，需要我们自行编写文档，然后交给VuePress变成网站。因此，本文将用vite2+Vue3编写一个在线帮助文档工具，需要的可以参考一下2022-03-03
本文主要介绍了Vite+Electron快速构建VUE3桌面应用的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了Vue异步更新DOM及$nextTick执行机制解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了打通前后端构建一个Vue+Express的开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了vue-cli3 从搭建到优化的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
今天小编就为大家分享一篇vue-router之实现导航切换过渡动画效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
在现代前端开发的世界中,Vue 3 已然成为了一个备受喜爱的框架,而 Vite 作为一个新兴的构建工具,以其极高的效率和简捷的配置方式席卷了开发者圈,本文我们将一步一步展示如何使用 Vite 构建一个 Vue 3 项目,从创建项目到最后的构建阶段,需要的朋友可以参考下2024-07-07
最新评论