解决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中使用mockjs代码实例
Nov 25 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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生成带有雪花背景的验证码
2006/10/09 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python导入txt数据到mysql的方法
2015/04/08 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
主管竞聘书范文
2014/03/31 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
公司禁烟通知
2015/04/23 职场文书
新学期感想
2015/08/10 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android