Vue如何通過Vue.prototype定義原型屬性實現(xiàn)全局變量
更新時間：2024年10月11日 08:46:29 作者：王小二(海闊天空)
在Vue.js開發(fā)中,通過原型屬性為Vue實例添加全局變量是一種常見做法,使用$前綴命名,可以避免與組件內(nèi)部的數(shù)據(jù)、方法或計算屬性產(chǎn)生命名沖突,這種方式簡單有效,確保了變量在所有Vue實例中的可用性,同時保持全局作用域的整潔
Vue通過Vue.prototype定義原型屬性實現(xiàn)全局變量
如果需要設(shè)置全局變量，但不想污染全局作用域。
這種情況下
可以通過在main.js中，Vue實例化的代碼里通過添加了原型屬性實現(xiàn)全局變量，使其在每個 Vue 的實例中可用。
Vue.prototype.$appName = 'My App'
這樣 $ appName 就在所有的 Vue 實例中可用了，甚至在實例被創(chuàng)建之前就可以。
如果我們運行下述代碼
則控制臺會打印出 My App。
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})- 提問：上述代碼中，為什么 appName 要以 $ 開頭呢？
- 回答：$ 是在 Vue 所有實例中都可用的屬性的一個簡單約定。這樣做會避免和已被定義的數(shù)據(jù)、方法、計算屬性產(chǎn)生沖突。
假如我們在main.js中通過如下方式定義原型屬性
運行下述代碼，則控制臺會打印什么呢？
Vue.prototype.appName = 'My App'
new Vue({
data: {
appName: 'The name of some other app'
},
beforeCreate: function () {
//父類中的屬性
console.log(this.appName)
},
created: function () {
//子類重寫的屬性
console.log(this.appName)
}
})控制臺日志中會先出現(xiàn) “My App”
然后出現(xiàn) “The name of some other app”
因為 this.appName 在實例被創(chuàng)建之后被 data 覆寫了
我們通過 $ 為實例屬性設(shè)置作用域來避免這種事情發(fā)生。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Router是Vue提供的路由管理器,將組件與路由一一對應(yīng)起來,這種對應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
下面小編就為大家分享一篇快速解決vue-cli不能初始化webpack模板的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue腳手架學(xué)習(xí)之項目創(chuàng)建方式
這篇文章主要給大家介紹了關(guān)于Vue腳手架學(xué)習(xí)之項目創(chuàng)建方式的相關(guān)資料，文中通過介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表格分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue 項目中使用Loading組件的示例代碼，使用 loding 過渡數(shù)據(jù)的加載時間2018-08-08
這篇文章主要介紹了Vue中使用axios調(diào)用后端接口的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Element Collapse 折疊面板的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue3基礎(chǔ)安裝以及配置詳解,需要的朋友可以參考下2023-01-01
構(gòu)建Vue大型應(yīng)用的10個最佳實踐(小結(jié))
這篇文章主要介紹了構(gòu)建Vue大型應(yīng)用的10個最佳實踐(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue實現(xiàn)el-select的change事件過程
這篇文章主要介紹了vue實現(xiàn)el-select的change事件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04