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>
复制代码