记录@click绑定事件的一个坑
问题描述:
今天练习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 () 方法。