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设置作用域

为什么 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实例，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. 应用示例

1） 引入 axios

npm install vue-axios --save

npm install qs.js --save　　//它的作用是能把json格式的直接转成data所需的格式

2） 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

3） 相应组件

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