在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之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
浅谈vue-props的default写不写有什么区别
Aug 09 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
vue实现放大镜效果
2020/09/17 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
秋季运动会广播稿
2014/02/22 职场文书
校园广播稿精选
2014/10/01 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015入党自荐书范文
2015/03/05 职场文书
大学生村官入党自传
2015/06/26 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis