Vue如何通過(guò)Vue.prototype定義原型屬性實(shí)現(xiàn)全局變量
更新時(shí)間：2024年10月11日 08:46:29 作者：王小二(海闊天空)
在Vue.js開(kāi)發(fā)中,通過(guò)原型屬性為Vue實(shí)例添加全局變量是一種常見(jiàn)做法,使用$前綴命名,可以避免與組件內(nèi)部的數(shù)據(jù)、方法或計(jì)算屬性產(chǎn)生命名沖突,這種方式簡(jiǎn)單有效,確保了變量在所有Vue實(shí)例中的可用性,同時(shí)保持全局作用域的整潔
Vue通過(guò)Vue.prototype定義原型屬性實(shí)現(xiàn)全局變量
如果需要設(shè)置全局變量，但不想污染全局作用域。
這種情況下
可以通過(guò)在main.js中，Vue實(shí)例化的代碼里通過(guò)添加了原型屬性實(shí)現(xiàn)全局變量，使其在每個(gè) Vue 的實(shí)例中可用。
Vue.prototype.$appName = 'My App'
這樣 $ appName 就在所有的 Vue 實(shí)例中可用了，甚至在實(shí)例被創(chuàng)建之前就可以。
如果我們運(yùn)行下述代碼
則控制臺(tái)會(huì)打印出 My App。
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})- 提問(wèn)：上述代碼中，為什么 appName 要以 $ 開(kāi)頭呢？
- 回答：$ 是在 Vue 所有實(shí)例中都可用的屬性的一個(gè)簡(jiǎn)單約定。這樣做會(huì)避免和已被定義的數(shù)據(jù)、方法、計(jì)算屬性產(chǎn)生沖突。
假如我們?cè)趍ain.js中通過(guò)如下方式定義原型屬性
運(yùn)行下述代碼，則控制臺(tái)會(huì)打印什么呢？
Vue.prototype.appName = 'My App'
new Vue({
data: {
appName: 'The name of some other app'
},
beforeCreate: function () {
//父類中的屬性
console.log(this.appName)
},
created: function () {
//子類重寫(xiě)的屬性
console.log(this.appName)
}
})控制臺(tái)日志中會(huì)先出現(xiàn) “My App”
然后出現(xiàn) “The name of some other app”
因?yàn)?this.appName 在實(shí)例被創(chuàng)建之后被 data 覆寫(xiě)了
我們通過(guò) $ 為實(shí)例屬性設(shè)置作用域來(lái)避免這種事情發(fā)生。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.js 中的實(shí)用工具方法，本文是小編日常開(kāi)發(fā)中常用的一些工具方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
利用vue寫(xiě)todolist單頁(yè)應(yīng)用
有很多關(guān)于vue的todolist小程序，這篇文章主要介紹了 用vue寫(xiě)todolist單頁(yè)應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁(yè)
這篇文章主要介紹了vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁(yè)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue3的沙箱機(jī)制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能的相關(guān)資料,Vue?3和Element?Plus提供了一種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)側(cè)邊菜單欄與標(biāo)簽頁(yè)之間的聯(lián)動(dòng),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了VueRouter原理解讀之初始化流程實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式超詳細(xì)分解
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無(wú)效問(wèn)題的解決
這篇文章主要介紹了vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無(wú)效問(wèn)題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點(diǎn)擊事件的項(xiàng)不能包含在這個(gè)類名里面，不然會(huì)無(wú)法觸發(fā)點(diǎn)擊事件，詳細(xì)解決辦法跟隨小編一起學(xué)習(xí)吧2022-05-05
vue單個(gè)元素綁定多個(gè)事件問(wèn)題(例如點(diǎn)擊綁定多個(gè)事件方法)
這篇文章主要介紹了vue單個(gè)元素綁定多個(gè)事件問(wèn)題(例如點(diǎn)擊綁定多個(gè)事件方法)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue.js自定義指令的基本使用詳情,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05