Vue.prototype 實現(xiàn)全局變量 --引用類型

在main.js里使用Vue.prototype聲明的變量虽界,實際上是為Vue對象添加了一個原型屬性谎懦,而不是一個全局變量哀托。

但是如果這個原型屬性的值是引用類型的锹安,我們就可以借此實現(xiàn)全局變量

當你在main.js里聲明了Vue.prototype.a = 1后,因為你的每一個vue組件都是一個Vue對象的實例并闲,

所以即使你沒有在組件內部使用

data(){
  return{……}
}

聲明a,你依然可以在組件中通過this.a來訪問谷羞。

當然帝火,你也可以在組件中添加一個變量a,

這時你訪問的就是你在組件中添加的a湃缎,而不再是之前在原型中添加的a了犀填,

當然你對組件的a繼續(xù)修改即不會影響原型中的a和其他組建中的a,

就類似于下面這段代碼(Form是一個自定義對象類型嗓违,Vue也可以看作一個自定義對象類型九巡,而每個.vue文件就是一個對象的實例)

//基本類型

function Form(){
}
Form.prototype.a= 0

var f1 = new Form()
var f2 = new Form()

console.log(f1)  //Form {}
console.log(f1.a)   //0
console.log(f2)  //Form {}
console.log(f2.a)   //0

f1.a++
console.log('f1.a++之后')  //f1.a++即 f1.a = f1.a + 1,在f1中添加了a屬性蹂季,其值為原型中a的值+1

console.log(f1)  //Form {a: 1}
console.log(f1.a)  //1
console.log(f2)  //Form {}
console.log(f2.a)  //0
//引用類型
function Form(){
}
Form.prototype.a= {value:0}

var f1 = new Form()
var f2 = new Form()

console.log(f1)  //Form {}
console.log(f1.a.value)   //0
console.log(f2)  //Form {}
console.log(f2.a.value)   //0

f1.a.value++
console.log('f1.a++之后')  //f1.a++之后

console.log(f1)  //Form {}
console.log(f1.a.value)  //1
console.log(f2)  //Form {}
console.log(f2.a.value)  //1

原型中a的值是一個Object類數(shù)據(jù)冕广,在實例中使用f1.a.value++并沒有修改f1.a指向的指針疏日,

實例中依然是訪問的原型中的a,同時改變的也是原型中a.value的值撒汉。

而f2.a.value訪問的也是原型中a.value的值沟优,因此f2.a.value的值變化了。

如果我們在main.js中聲明Vue.prototype.global={a:0}

那我們只要不在組件中重新添加global這個變量睬辐,就能在所有組件中使用this.global.a這個值了

同時在一個組件中修改了this.global.a的值挠阁,其他所有組件中訪問的this.global.a的值也會變化

這樣就相當于使用Vue.prototype實現(xiàn)了vue的全局變量

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市溯饵,隨后出現(xiàn)的幾起案子侵俗,更是在濱河造成了極大的恐慌,老刑警劉巖丰刊,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件隘谣,死亡現(xiàn)場離奇詭異,居然都是意外死亡藻三,警方通過查閱死者的電腦和手機洪橘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來棵帽,“玉大人熄求,你說我怎么就攤上這事《焊牛” “怎么了弟晚?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長逾苫。 經常有香客問我卿城,道長,這世上最難降的妖魔是什么铅搓? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任瑟押,我火速辦了婚禮,結果婚禮上星掰,老公的妹妹穿的比我還像新娘多望。我一直安慰自己,他們只是感情好氢烘,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布怀偷。 她就那樣靜靜地躺著,像睡著了一般播玖。 火紅的嫁衣襯著肌膚如雪椎工。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音维蒙,去河邊找鬼掰吕。 笑死,一個胖子當著我的面吹牛木西,可吹牛的內容都是我干的畴栖。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼八千,長吁一口氣:“原來是場噩夢啊……” “哼吗讶!你這毒婦竟也來了?” 一聲冷哼從身側響起恋捆,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤照皆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后沸停,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體膜毁,經...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年愤钾,在試婚紗的時候發(fā)現(xiàn)自己被綠了瘟滨。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡能颁,死狀恐怖杂瘸,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情伙菊,我是刑警寧澤败玉,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站镜硕,受9級特大地震影響运翼,放射性物質發(fā)生泄漏。R本人自食惡果不足惜兴枯,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一血淌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧财剖,春花似錦悠夯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽该默。三九已至瞳氓,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背匣摘。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工店诗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人音榜。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓庞瘸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親赠叼。 傳聞我的和親對象是個殘疾皇子擦囊,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內容

  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,124評論 0 21
  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設計架構和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 2,907評論 1 4
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,184評論 0 3
  • vue-cli搭建項目 確保安裝了node與npm 再目標文件夾下打開終端 執(zhí)行cnpm i vue-cli -g...
    Akiko_秋子閱讀 3,232評論 1 22
  • 通過看到爸爸媽媽的優(yōu)良品質嘴办,我的優(yōu)良品質和孩子的優(yōu)良品質瞬场,總結了家族給我們留下了三個優(yōu)良品質是善良、智慧涧郊。幽默贯被。 ...
    66b46c8dfeab閱讀 162評論 0 0