vue组件中添加@click失效问题及解决
vue组件中添加@click失效
遇到了一个非常蠢的bug，在vue组件中添加click事件无效，@click.native也无效
想添加一个click事件来切换歌曲
<div class="playlist"> <div class="playItem" v-for="(item,i) in playlist.tracks" :key="item.id" @click="setPlayIndex(i)"></div> </div>
结果click事件一直无效，试了@click.native也无效，总之很多网上别的方法都试过了都不行...
查看事件监听器也有click，但是是怎么回事呢？
原来是！
我之前在歌单组件playlist里面写了个z-index:-1;
.playlist{
width: 7.5rem;
padding: 0 0.4rem;
background: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,1));
position: relative;
top: -0.5rem;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
z-index:-1;
}然后其实一直点击不到而已！
删掉就好了。
@click失效？@click.native
问题描述
练习uniapp开发的时候，封装好了一个组件，但是给组件绑定了@click事件后，事件却没有执行。
主要代码如下
<div class="row" v-for="item in newsArr" :key="item.id">
<newsbox :item="item" @click="goDetail(item)"></newsbox>
</div>
//跳转到详情页
goDetail(item){
uni.navigateTo({
url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
})
},newsbox是我自己封装的一个组件，问题就出在这儿，newsbox是子组件，想要直接在父组件触发click方法，直接写上@click是不能触发方法的。
这时候需要在@click.native就可以解决了，可是为什么呢
官网的解释
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲
就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的。
可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
更细一点来讲
是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行。
这里也引出了对绑定@click无效有两种解决方法
- 在组件上绑定@click.native=”XXX”，
- 子组件中添加 this.$emit (“click” ，value) 方法 将子组件的值传到父组件。
但是这种方法相对麻烦，比如组件中有多个事件，需要重复添加 $emit () 方法。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了部属vue项目,访问路径设置非根,显示白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目打包步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了Vue中foreach数组与js中遍历数组的写法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
Vue 3 表格时间监控与动态后端请求触发详解 附Demo展示
在Vue3中,使用el-table组件渲染表格数据,通过el-table-column指定内容,时间点需前端校准,用getTime()比较,到达时触发操作,异步API请求可用async/await处理,setInterval实现定时监控,配合条件判断防止重复请求2024-09-09
这篇文章主要介绍了vue-cli4.0多环境配置变量与模式详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
在Vue中，动画效果是非常有用的，它可以使用户界面变得更加生动、有趣，本文中我们将学习如何在Vue中进行自定义动画与动画效果设计，感兴趣的可以了解一下2023-06-06
防抖和节流是我们在开发过程中常用优化性能的方式,可以减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算,这篇文章主要给大家介绍了关于vue中防抖和节流使用的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了Vue组件更新数据v-model不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
基于vue3+TypeScript实现一个简易的Calendar组件
最近在学习 react,在学习到使用 react 开发 Calendar 组件的时候,突然联想到使用 vue 进行 Calendar 功能的实现,因为目前使用的技术栈是 vue,刚好可以加深下对 vue3 和 ts 的使用印象,所以本文给大家介绍了基于vue3+TypeScript实现一个简易的Calendar组件2024-05-05
这篇文章主要介绍了vue监听scroll的坑的解决方法，现在分享给大家，也给大家做个参考，希望给有同样经历的人帮助2017-09-09
最新评论