解决vue自定义组件@click点击失效问题


Posted in Vue.js onApril 30, 2022

自定义组件@click点击失效

问题描述

自定义组件在使无法,无法绑定原vue文件内的原生click事件

原因分析

根据查询vue官方文档,得知click事件作用于组件内部,如果组件内没有写click事件,便会无响应。

问题解决

1.参照官方文档,可以用@click.native=“click”解决

解决vue自定义组件@click点击失效问题

2.可以用:将事件传递至组件内,也符合组件间的单向数据流,我就是这样解决的

主组件写法:

解决vue自定义组件@click点击失效问题

被调用组件写法:将click绑定在自定义组件内部想要click的地方

解决vue自定义组件@click点击失效问题

3.使用$emit来实现事件传递

解决vue自定义组件@click点击失效问题

父组件写法不受影响,可以直接按照原来的写法,适合强迫症、处女座用户

@click不起作用,同时报错

点击报错:

_vm.gotoExpense is not a functionError: _vm.gotoExpense is not a functionat http://127.0.0.1:24333/appservice/common/vendor.js:1186:23at Array.forEach ()at http://127.0.0.1:24333/appservice/common/vendor.js:1171:23at Array.forEach ()at Je.handleEvent [as __e] (http://127.0.0.1:24333/appservice/common/vendor.js:1161:17)at Object.r.safeCallback (http://127.0.0.1:24333/appservice/dev/WAService.js:2:1827260)at http://127.0.0.1:24333/appservice/dev/WAService.js:2:1966938at s (http://127.0.0.1:24333/appservice/dev/WAService.js:2:1980424)at http://127.0.0.1:24333/appservice/dev/WAService.js:2:1966863at r (http://127.0.0.1:24333/appservice/dev/WAService.js:2:1904675)

检查自己**methods:{}**是不是写了两个!!!


Tags in this post...

Vue.js 相关文章推荐
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
Vue操作Storage本地化存储
Apr 29 #Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 #Vue.js
详解Vue3使用axios的配置教程
Apr 29 #Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 #Vue.js
vue里使用create, mounted调用方法
vue elementUI批量上传文件
Apr 26 #Vue.js
vue.js 使用原生js实现轮播图
Apr 26 #Vue.js
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
详解Python字符串对象的实现
2015/12/24 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
自荐书封面下载
2013/11/29 职场文书
护理实习自我鉴定
2013/12/14 职场文书
教师求职自荐信
2014/03/09 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
给朋友的赠语
2015/06/23 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript