在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 相关文章推荐
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
浅谈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 一元分词算法
2009/11/30 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
python集合是否可变总结
2019/06/20 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python 伯努利分布详解
2020/02/25 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
中学生运动会新闻稿
2014/09/24 职场文书
天下第一关导游词
2015/02/06 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB