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.js 中的實用工具方法，本文是小編日常開發(fā)中常用的一些工具方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
有很多關(guān)于vue的todolist小程序，這篇文章主要介紹了 用vue寫todolist單頁應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue實現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁
這篇文章主要介紹了vue實現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue3的沙箱機制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue3+Element?Plus實現(xiàn)動態(tài)標(biāo)簽頁以及右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus實現(xiàn)動態(tài)標(biāo)簽頁以及右鍵菜單功能的相關(guān)資料,Vue?3和Element?Plus提供了一種簡單的方法來實現(xiàn)側(cè)邊菜單欄與標(biāo)簽頁之間的聯(lián)動,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了VueRouter原理解讀之初始化流程實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue實現(xiàn)路由跳轉(zhuǎn)的3種方式超詳細(xì)分解
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實現(xiàn)路由跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)路由跳轉(zhuǎn)的3種方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決
這篇文章主要介紹了vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點擊事件的項不能包含在這個類名里面，不然會無法觸發(fā)點擊事件，詳細(xì)解決辦法跟隨小編一起學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue單個元素綁定多個事件問題(例如點擊綁定多個事件方法)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue.js自定義指令的基本使用詳情,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值需要的小伙伴可以參考一下2022-05-05