Vue中 Vue.prototype 詳解及使用

這是我參與更文挑戰的第 21 天，活動詳情查看：更文挑戰

咱們可能會在不少組件裏用到數據/實用工具，可是不想污染全局做用域。這種狀況下，能夠經過在原型上定義它們使其在每一個 Vue 的實例中可用。

1. 基本示例

在main.js中添加一個變量到 Vue.prototype

Vue.prototype.$appName = 'My App'
複製代碼

這樣 $appName 就在全部的 Vue 實例中可用了，甚至在實例被建立以前就能夠

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})
複製代碼

控制檯會打印出 My App，就這麼簡單！

2. 爲實例prototype設置做用域

爲何 appName 要以 $開頭？ 這很重要嗎？ 這裏沒有什麼魔法。$ 是在 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 設置做用域來避免這種事情發生。 你還能夠根據你的喜愛使用本身的約定，諸如$_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 再跳轉about，about裏面仍是顯示 main in test2

若是要實現全局變量的功能，須要把屬性變爲引用類型

Vue.prototype.$appName = { name: 'main' }
複製代碼

後面使用 this.$appName.name 改變和引用相應的值

這進入 about 後顯示 test1 in test2

4. 原型方法的上下文

在 JavaScript 中一個原型的方法會得到該實例的上下文,也就是說可使用 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>
複製代碼