在Vue中獲取組件聲明時的name屬性方法

更新時間：2018年09月12日 09:11:06 作者：qq20004604

今天小編就為大家分享一篇在Vue中獲取組件聲明時的name屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在實際開發(fā)中，我們可能需要拿到組件聲明時創(chuàng)建的一些屬性，比較典型的話就是name屬性，在實際開發(fā)中需要定位問題時，需要找到是哪一個組件，但是我們總不可能寫代碼的時候去先找到組件的name屬性，然后復(fù)制粘貼，作為參數(shù)傳給函數(shù)吧。

例如：

catchError('componentsName', 'errorDescription')

太傻了。

解決辦法，獲取到組件的this，然后利用this去拿到組件的name屬性，這樣的話，代碼就可以這么寫：

catchError.call(this, 'errorDescription')

我們就只需要專注于錯誤描述就行了（說不定錯誤描述也是一個變量，那么就更簡單咯）。

catchError函數(shù)的內(nèi)容應(yīng)該這么寫：

function catchError (url) {
 console.error(`${this.$options.name} 組件中，以下圖片鏈接不存在，或無法打開：${url}`)
 // 這里可以寫一個上報的ajax請求
 // ... do some code
}

完美的解決方案！

以上這篇在Vue中獲取組件聲明時的name屬性方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
VUE 實現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實現(xiàn)復(fù)制內(nèi)容到剪貼板功能，本文通過兩種方法，給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-04-04
vue-loader中引入模板預(yù)處理器的實現(xiàn)
這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue項目中該如何解決跨域問題
當(dāng)協(xié)議,域名,端口其中某一個不一致的時候,就會產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于Vue項目中該如何解決跨域問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-06-06
Vue.js組件實現(xiàn)選項卡以及切換特效
這篇文章主要為大家詳細介紹了Vue.js組件實現(xiàn)選項卡以及切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
vue深拷貝的3種實現(xiàn)方式小結(jié)
當(dāng)使用同一個對象產(chǎn)生沖突時，可以使用lodash包，對該對象進行深拷貝，從而使操作的對象為不同的對象,這篇文章主要給大家介紹了關(guān)于vue深拷貝的3種實現(xiàn)方式,需要的朋友可以參考下
2023-02-02
vue-router報錯:uncaught error during route
這篇文章主要介紹了vue-router報錯:uncaught error during route navigati問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue之生命周期函數(shù)詳解
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vue?router進行路由跳轉(zhuǎn)并攜帶參數(shù)的實例詳解(params/query)
在使用`router.push`進行路由跳轉(zhuǎn)到另一個組件時，可以通過`params`或`query`來傳遞參數(shù)，這篇文章主要介紹了vue?router進行路由跳轉(zhuǎn)并攜帶參數(shù)（params/query）,需要的朋友可以參考下
2023-09-09
Vue組件選項props實例詳解
父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。本文將詳細介紹Vue組件選項props,需要的朋友可以參考下
2017-08-08