您现在的位置是:网站首页> 编程资料编程资料
Vue如何给组件添加点击事件 @click.native_vue.js_
2023-05-24
416人已围观
简介 Vue如何给组件添加点击事件 @click.native_vue.js_
给组件添加点击事件 @click.native
问题
毕设项目中有个产品展示列表,当初用组件写的,今天想要点击获取当前选中的产品的数据,刚开始直接使用@click写的,但是点击并没有生效。

我尝试在组件中添加点击事件,点击图片,控制台输出1。

结果是可以实现的。
结论
给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件。

那么,两者同时存在的话结果如何呢?

点击图片,先执行item中的函数,再执行组件的点击事件。
vue中@click.native使用
在组件中时常看到@click.native。在项目中遇到后,简单介绍下:
@click.native是给组件绑定原生事件

我的标签 ‘ListCell’ 是子组件引到当前父组件
因为当父组件中引入子组件的时候,当要触发子组件点击事件的时候@click 不生效。
有两种解决方式
1.@click.native
2.在子组件中添加this.$emit ( “事件名” ,value )方法 将子组件的值传到父组件。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- vue如何给组件动态绑定不同的事件_vue.js_
- 使用van-picker 动态设置当前选中项_vue.js_
- Vue中的事件绑定与解绑方式_vue.js_
- element ui循环调用this.$alert 消息提示只显示最后一个_vue.js_
- vue3如何使用vant-picker封装省市二级联动_vue.js_
- js 字符串反转(倒序)的几种方式总结_javascript技巧_
- JS中关于Class类的静态属性和静态方法_javascript技巧_
- js对象合并的4种方式与数组合并的4种方式_javascript技巧_
- Vue中如何处理token过期问题_vue.js_
- vue中如何实现复制内容到剪切板详解_vue.js_
