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 () 方法。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。