在Vue中获取组件声明时的name属性方法


Posted in Javascript onSeptember 12, 2018

在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧。

例如:

catchError('componentsName', 'errorDescription')

太傻了。

解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写:

catchError.call(this, 'errorDescription')

我们就只需要专注于错误描述就行了(说不定错误描述也是一个变量,那么就更简单咯)。

catchError函数的内容应该这么写:

function catchError (url) {
 console.error(`${this.$options.name} 组件中,以下图片链接不存在,或无法打开:${url}`)
 // 这里可以写一个上报的ajax请求
 // ... do some code
}

完美的解决方案!

以上这篇在Vue中获取组件声明时的name属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
浅谈webpack4 图片处理汇总
Sep 12 #Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 #Javascript
vue this.reload 方法 配置
Sep 12 #Javascript
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
JS中判断字符串存在和非空的方法
Sep 12 #Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 #Javascript
微信小程序实现tab左右切换效果
Nov 15 #Javascript
You might like
php设计模式 Delegation(委托模式)
2011/06/26 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python3 读写文件换行符的方法
2018/04/09 Python
python多线程同步实例教程
2019/08/11 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
教师演讲稿范文
2014/01/08 职场文书
学习十八大报告感言
2014/02/04 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
工作建议书范文
2019/07/08 职场文书
go xorm框架的使用
2021/05/22 Golang
前端JavaScript大管家 package.json
2021/11/02 Javascript
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js