在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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
jquery的颜色选择插件实例代码
Oct 02 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 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中Memcache操作类及用法实例
2014/12/12 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python读写ini文件的方法
2015/05/28 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
单链表反转python实现代码示例
2018/02/08 Python
python内置数据类型之列表操作
2018/11/12 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python如何进行矩阵运算
2020/06/05 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
优秀教导主任事迹材料
2014/05/09 职场文书
公司活动总结范文
2014/07/01 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
质量整改报告范文
2014/11/08 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
音乐剧猫观后感
2015/06/04 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android