Vue中 Vue.prototype使用詳解
我們可能會(huì)在很多組件里用到數(shù)據(jù)/實(shí)用工具,但是不想污染全局作用域。這種情況下,可以通過(guò)在原型上定義它們使其在每個(gè) Vue 的實(shí)例中可用。
1. 基本示例
在main.js中添加一個(gè)變量到 Vue.prototype
Vue.prototype.$appName = 'My App'
這樣 $appName 就在所有的 Vue 實(shí)例中可用了,甚至在實(shí)例被創(chuàng)建之前就可以
new Vue({ beforeCreate: function () { console.log(this.$appName) } })
控制臺(tái)會(huì)打印出 My App,就這么簡(jiǎn)單!
2. 為實(shí)例prototype設(shè)置作用域
為什么 appName 要以 開(kāi)頭?這很重要嗎?這里沒(méi)有什么魔法。 開(kāi)頭? 這很重要嗎? 這里沒(méi)有什么魔法。開(kāi)頭?這很重要嗎?這里沒(méi)有什么魔法。 是在 Vue 所有實(shí)例中都可用的 property 的一個(gè)簡(jiǎn)單約定。這樣做會(huì)避免和已被定義的數(shù)據(jù)、方法、計(jì)算屬性產(chǎn)生沖突。
如果我們?cè)O(shè)置:
Vue.prototype.appName = 'My App'
那么如下的代碼輸出什么:
new Vue({ data: { // 啊哦,`appName` 也是一個(gè)我們定義的實(shí)例 property 名! appName: 'The name of some other app' }, beforeCreate: function () { console.log(this.appName) }, created: function () { console.log(this.appName) } })
日志中會(huì)先出現(xiàn) "My App",然后出現(xiàn) "The name of some other app",因?yàn)?this.appName 在實(shí)例被創(chuàng)建之后被 data 覆寫(xiě)了。我們通過(guò) 為實(shí)例property設(shè)置作用域來(lái)避免這種事情發(fā)生。你還可以根據(jù)你的喜好使用自己的約定,諸如為實(shí)例 property 設(shè)置作用域來(lái)避免這種事情發(fā)生。 你還可以根據(jù)你的喜好使用自己的約定,諸如為實(shí)例property設(shè)置作用域來(lái)避免這種事情發(fā)生。你還可以根據(jù)你的喜好使用自己的約定,諸如_appName 或 ΩappName,來(lái)避免和插件或未來(lái)的插件相沖突。
3. 注冊(cè)和使用全局變量
每個(gè)組件都是一個(gè)vue實(shí)例,Vue.prototype加一個(gè)變量,只是給每個(gè)組件加了一個(gè)屬性,這個(gè)屬性的值并不具有全局性。
比如以下例子:
// main.js import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false Vue.prototype.$appName = 'main' new Vue({ el: '#app', store, router, components: { App }, template: '<App/>', }) // 給所有組件注冊(cè)了一個(gè)屬性 $appName,賦予初始值 'main' ,所有組件都可以用 this.$appName 訪問(wèn)此變量; // 如果組件中沒(méi)有賦值,初始值都是'main'
// home.vue <template> <div> <div @click="changeName">change name</div> <div @click="gotoTest2">goto test2</div> </div> </template> <script> export default { methods:{ changeName(){ this.$appName = "test1" }, gotoTest2(){ this.$router.push('/about') } } } </script>
// about.vue <template> <div> <div>{{this.$appName}} in test2</div> </div> </template>
點(diǎn)擊 home 中的 change name 再跳轉(zhuǎn)about,about里面還是顯示 main in test2
如果要實(shí)現(xiàn)全局變量的功能,需要把屬性變?yōu)橐妙愋?br />
Vue.prototype.$appName = { name: 'main' }
后面使用 this.$appName.name 改變和引用相應(yīng)的值
這進(jìn)入 about 后顯示 test1 in test2
4. 原型方法的上下文
在 JavaScript 中一個(gè)原型的方法會(huì)獲得該實(shí)例的上下文,也就是說(shuō)可以使用 this 訪問(wèn):數(shù)據(jù)、計(jì)算屬性、方法或其它任何定義在實(shí)例上的東西。
讓我們將其用在一個(gè)名為 $reverseText 的方法上:
// main.js Vue.prototype.$reverseText = function (propertyName) { this[propertyName] = this[propertyName] .split('') .reverse() .join('') }
// 相應(yīng)組件 <script> export default { data() { return{ message: 'Hello' } }, created() { console.log(this.message) // => "Hello" this.$reverseText('message') console.log(this.message) // => "olleH" } } </script>
5. 應(yīng)用示例
5.1 引入 axios
npm install vue-axios --save npm install qs.js --save //它的作用是能把json格式的直接轉(zhuǎn)成data所需的格式
// mian.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' Vue.prototype.$axios = axios //全局注冊(cè),使用方法為:this.$axios Vue.prototype.qs = qs //全局注冊(cè),使用方法為:this.qs // 相應(yīng)組件 <script> export default{ data(){ return{ userId:666, token:'', } }, created(){ this.$axios({ method:'post', url:'api', data:this.qs.stringify({ //這里是發(fā)送給后臺(tái)的數(shù)據(jù) userId:this.userId, token:this.token, }) }).then((response) =>{ //這里使用了ES6的語(yǔ)法 console.log(response) //請(qǐng)求成功返回的數(shù)據(jù) }).catch((error) =>{ console.log(error) //請(qǐng)求失敗返回的數(shù)據(jù) }) } } </script>
Vue.prototype、Vue.component和Vue.use區(qū)別
1、Vue.prototype
在多個(gè)地方都需要使用但不想污染全局作用域的情況下,這樣定義,在每個(gè) Vue 實(shí)例中都可用。
參考:https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
$ 表示這是一個(gè)在 Vue 所有實(shí)例中都可用的屬性
常用于方法、變量等
import echarts from 'echarts' Vue.prototype.$echarts = echarts
2、vue.component
全局注冊(cè)組件,
第一個(gè)參數(shù)是調(diào)用組件時(shí)寫(xiě)的組件名
第二個(gè)參數(shù)是引入組件時(shí)寫(xiě)的名稱
可用于注冊(cè)自定義組件
import myLoading from 'base/loading' Vue.component('myLoading',myLoading);
3、Vue.use
同樣是全局注冊(cè),和component的區(qū)別是接收的參數(shù)必須有install方法
常用于注冊(cè)第三方插件
import ElementUI from 'element-ui'; Vue.use(ElementUI);
到此這篇關(guān)于Vue中 Vue.prototype使用詳解的文章就介紹到這了,更多相關(guān)Vue.prototype使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3使用時(shí)應(yīng)避免的10個(gè)錯(cuò)誤總結(jié)
Vue?3已經(jīng)穩(wěn)定了相當(dāng)長(zhǎng)一段時(shí)間了。許多代碼庫(kù)都在生產(chǎn)環(huán)境中使用它,其他人最終都將不得不遷移到Vue?3。我現(xiàn)在有機(jī)會(huì)使用它并記錄了我的錯(cuò)誤,下面這些錯(cuò)誤你可能想要避免2023-03-03vue使用監(jiān)聽(tīng)實(shí)現(xiàn)全選反選功能
最近做的項(xiàng)目用到了全選全不選功能,于是我就自己動(dòng)手寫(xiě)了一個(gè),基于vue使用監(jiān)聽(tīng)實(shí)現(xiàn)全選反選功能,具體實(shí)例代碼大家參考下本文2018-07-07vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作
這篇文章主要介紹了vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue使用vuex實(shí)現(xiàn)首頁(yè)導(dǎo)航切換不同路由的方法
這篇文章主要介紹了vue使用vuex實(shí)現(xiàn)首頁(yè)導(dǎo)航切換不同路由的方法 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能
這篇文章主要介紹了vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01使用vue實(shí)現(xiàn)簡(jiǎn)單鍵盤的示例(支持移動(dòng)端和pc端)
這篇文章主要介紹了使用vue實(shí)現(xiàn)簡(jiǎn)單鍵盤的示例(支持移動(dòng)端和pc端),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12