解决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 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 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
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python修改操作系统时间的方法
2015/05/18 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python怎么对数字进行过滤
2020/07/05 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
士力架广告词
2014/03/20 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
投标承诺函格式
2015/01/21 职场文书
护士医德医风心得体会
2016/01/25 职场文书