Vue中 Vue.prototype 详解及使用

我们可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，可以通过在原型上定义它们使其在每个 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设置作用域

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. 注册和使用全局变量

// 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: ' 
   ', }) // 给所有组件注册了一个属性 $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. 原型方法的上下文

 // 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>