解决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打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
浅谈Vue的computed计算属性
Mar 21 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP动态图像的创建
2006/10/09 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
js+jquery实现图片裁剪功能
2015/01/02 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python中的逆序遍历实例
2019/12/25 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
软件售后服务方案
2014/05/29 职场文书
二年级数学教学反思
2016/02/16 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
logback如何自定义日志存储
2021/08/30 Java/Android
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server