Vue中 Vue.prototype使用詳解
目錄
- 1. 基本示例
- 2. 為例項prototype設定作用域
- 3. 註冊和使用全域性變數
- 4. 原型方法的上下文
- 5. 應用示例
- 5.1 引入 axios
- .prototype、Vue.component和Vue.use區別
- 1、Vue.prototype
- 2、vue.component
- 3、Vue.use
我們可能會在很多元件裡用到資料/實用工具,但是不想汙染全域性作用域。這種情況下,可以通過在原型上定義它們使其在每個 Vue 的例項中可用。
1. 基本示例
在main.中新增一個變數到 Vue.prototype
Vue.prototype.$appName = 'My App'
這樣 $appName 就在所有的 Vue 例項中可用了,甚至在例項被建立之前就可以
new Vue({ befohttp://www.cppcns.comreCreate: function () { console.log(this.$appName) } })
控制檯會打印出 My App,就這麼簡單!
2. 為例項prototype設定作用域
為什麼 aphttp://www.cppcns.compName 要以 開頭?這很重要嗎?這裡沒有什麼魔法。 開頭? 這很重要嗎? 這裡沒有什麼魔法。開頭?這很重要嗎?這裡沒有什麼魔法。 是在 Vue 所有例項中都可用的 property 的一個簡單約定。這樣做會避免和已被定義的資料、方法、計算屬性產生衝突。
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) } })
日誌中會先出現 "My App",然後出現 "The name of some other app",因為 this.appName 在例項被建立之後被 data 覆寫了。我們通過 為例項property設定作用域來避免這種事情發生。你還可以根據你的喜好使用自己的約定,諸如為例項 property 設定作用域來避免這種事情發生。 你還可以根據你的喜好使用自己的約定,諸如為例項property設定作用域來避免這種事情發生。你還可以根據你的喜好使用自己的約定,諸如_appName 或 appName,來避免和外掛或未來的外掛相沖突。
3. 註冊和使用全域性變數
每個元件都是一個vue例項,Vue.prototype加一個變數,只是給每個元件加了一個屬性,這個屬性的http://www.cppcns.com值並不具有全域性性。
比如以下例子:
// 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 再跳轉about,about裡面還是顯示 main in test2
如果要實現全域性變數的功能,需要把屬性變為引用型別
Vue.prototype.$appName = { name: 'main' }
後面使用 this.$appName.name 改變和引用相應的值
這進入 about 後顯示 test1 in test2
4. 原型方法的上下文
在 中一個原型的方法會獲得該例項的上下文,也就是說可以使用 this 訪問:資料、計算屬性、方法或其它任何定義在例項上的東西。
讓我們將其用在一個名為 $reverseText 的方法上:
// main.js Vue.prototype.$reverseText = function (propertyName) { this[propertyName] = this[propertyName] .split('') .reverse() .join('') }
// 相應元件 <script> export default { data() { return{ message: 'Hello' } },created() { console.log(this.message) // => "Hello" this.$reverseText('message') console.log(this.message) // => "olleH" } } </script>
5. 應用示例
5.1 引入 axios
npm install vue-axios --save npm install qs.js --save //它的作用是能把json格式的直接轉成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 // 相應元件 <script> export default{ data(){ return{ userId:666, token:'',} },created(){ this.$axios({ method:'post',url:'api',data:this.qs.stringify({ //這裡是傳送給後臺的資料 userId:this.userId,token:this.token,}) }).then((response) =>{ //這裡使用了ES6的語法 console.log(response) //請求成功返回的資料 }).catch((error) =>{ console.log(error) //請求失敗返回的資料 }) } } </script>
Vue.prototype、Vue.component和Vue.use區別
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
全域性註冊元件,
第一個引數是呼叫元件時寫的元件名
第二個引數是引入元件時寫的名稱
可用於註冊自定義元件
import myLoading from 'base/loading' Vue.component('myLoading',myLoading);
3、Vue.use
同樣是全域性註冊,和component的區別是接收的引數必須有install方法
常用於註冊第三方外掛
import ElementUI from 'element-ui'; Vue.use(ElementUI);
到此這篇關於Vue中 Vue.prototype使用詳解的文章就介紹到這了,更多相關Vue.prototype使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!