Vue中 Vue.prototype使用詳解
我們可能會在很多組件里用到數(shù)據(jù)/實用工具，但是不想污染全局作用域。這種情況下，可以通過在原型上定義它們使其在每個 Vue 的實例中可用。
1. 基本示例
在main.js中添加一個變量到 Vue.prototype
Vue.prototype.$appName = 'My App'
這樣 $appName 就在所有的 Vue 實例中可用了，甚至在實例被創(chuàng)建之前就可以
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})
控制臺會打印出 My App，就這么簡單！
2. 為實例prototype設(shè)置作用域
為什么 appName 要以 開頭？這很重要嗎？這里沒有什么魔法。 開頭？ 這很重要嗎？ 這里沒有什么魔法。開頭？這很重要嗎？這里沒有什么魔法。 是在 Vue 所有實例中都可用的 property 的一個簡單約定。這樣做會避免和已被定義的數(shù)據(jù)、方法、計算屬性產(chǎn)生沖突。
如果我們設(shè)置：
Vue.prototype.appName = 'My App'
那么如下的代碼輸出什么：
new Vue({
data: {
// 啊哦，`appName` 也是一個我們定義的實例 property 名！
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 覆寫了。我們通過 為實例property設(shè)置作用域來避免這種事情發(fā)生。你還可以根據(jù)你的喜好使用自己的約定，諸如為實例 property 設(shè)置作用域來避免這種事情發(fā)生。 你還可以根據(jù)你的喜好使用自己的約定，諸如為實例property設(shè)置作用域來避免這種事情發(fā)生。你還可以根據(jù)你的喜好使用自己的約定，諸如_appName 或 ΩappName，來避免和插件或未來的插件相沖突。
3. 注冊和使用全局變量
每個組件都是一個vue實例，Vue.prototype加一個變量，只是給每個組件加了一個屬性，這個屬性的值并不具有全局性。
比如以下例子：
// 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/>',
})
// 給所有組件注冊了一個屬性 $appName，賦予初始值 'main' ，所有組件都可以用 this.$appName 訪問此變量;
// 如果組件中沒有賦值，初始值都是'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>
點擊 home 中的 change name 再跳轉(zhuǎn)about，about里面還是顯示 main in test2
如果要實現(xiàn)全局變量的功能，需要把屬性變?yōu)橐妙愋?br />
Vue.prototype.$appName = { name: 'main' }
后面使用 this.$appName.name 改變和引用相應(yīng)的值
這進(jìn)入 about 后顯示 test1 in test2
4. 原型方法的上下文
在 JavaScript 中一個原型的方法會獲得該實例的上下文,也就是說可以使用 this 訪問：數(shù)據(jù)、計算屬性、方法或其它任何定義在實例上的東西。
讓我們將其用在一個名為 $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 //全局注冊，使用方法為:this.$axios
Vue.prototype.qs = qs //全局注冊，使用方法為:this.qs
// 相應(yīng)組件
<script>
export default{
data(){
return{
userId:666,
token:'',
}
},
created(){
this.$axios({
method:'post',
url:'api',
data:this.qs.stringify({ //這里是發(fā)送給后臺的數(shù)據(jù)
userId:this.userId,
token:this.token,
})
}).then((response) =>{ //這里使用了ES6的語法
console.log(response) //請求成功返回的數(shù)據(jù)
}).catch((error) =>{
console.log(error) //請求失敗返回的數(shù)據(jù)
})
}
}
</script>
Vue.prototype、Vue.component和Vue.use區(qū)別
1、Vue.prototype
在多個地方都需要使用但不想污染全局作用域的情況下，這樣定義，在每個 Vue 實例中都可用。
參考：https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
$ 表示這是一個在 Vue 所有實例中都可用的屬性
常用于方法、變量等
import echarts from 'echarts' Vue.prototype.$echarts = echarts
2、vue.component
全局注冊組件，
第一個參數(shù)是調(diào)用組件時寫的組件名
第二個參數(shù)是引入組件時寫的名稱
可用于注冊自定義組件
import myLoading from 'base/loading'
Vue.component('myLoading',myLoading);
3、Vue.use
同樣是全局注冊，和component的區(qū)別是接收的參數(shù)必須有install方法
常用于注冊第三方插件
import ElementUI from 'element-ui'; Vue.use(ElementUI);
到此這篇關(guān)于Vue中 Vue.prototype使用詳解的文章就介紹到這了,更多相關(guān)Vue.prototype使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
緩存清除成為克服瀏覽器緩存中過時內(nèi)容挑戰(zhàn)的關(guān)鍵技術(shù),術(shù)語“緩存清除”是指故意使靜態(tài)資源失效或進(jìn)行版本控制,迫使瀏覽器在發(fā)生更改時獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下2023-12-12
Vue?3已經(jīng)穩(wěn)定了相當(dāng)長一段時間了。許多代碼庫都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue?3。我現(xiàn)在有機(jī)會使用它并記錄了我的錯誤，下面這些錯誤你可能想要避免2023-03-03
這篇文章主要介紹了vue slot與傳參實例代碼講解，在文章末尾給大家介紹了vue 利用slot向父組件傳值的方法,需要的朋友可以參考下2019-04-04
最近做的項目用到了全選全不選功能，于是我就自己動手寫了一個，基于vue使用監(jiān)聽實現(xiàn)全選反選功能，具體實例代碼大家參考下本文2018-07-07
vue 里面的 $forceUpdate() 強(qiáng)制實例重新渲染操作
這篇文章主要介紹了vue 里面的 $forceUpdate() 強(qiáng)制實例重新渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue使用vuex實現(xiàn)首頁導(dǎo)航切換不同路由的方法
這篇文章主要介紹了vue使用vuex實現(xiàn)首頁導(dǎo)航切換不同路由的方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue+vant實現(xiàn)商品列表批量倒計時功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
使用vue實現(xiàn)簡單鍵盤的示例(支持移動端和pc端)
這篇文章主要介紹了使用vue實現(xiàn)簡單鍵盤的示例(支持移動端和pc端)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)學(xué)生管理功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)防抖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01