Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突

**应用场景：**在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

1、基本示例

在main.js中添加一个变量到 Vue.prototype

src/main.js

Vue.prototype.$appName = 'My App'
// Vue.prototype._ = _;

这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)  // 'My App'
  }
})

2、为实例prototype设置作用域

为什么 appName 要以 $ 开头？这很重要吗？
$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
如果我们设置：

src/main.js

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加一个变量，只是给每个组件加了一个属性，这个属性的值并不具有全局性。
比如：

src/main.js

// 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’，所有组件都可以用this.appName访问此变量。

如果组件中没有赋值，初始值都是’main’。

示例：

1、index.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>

2、about.vue

<template>
  <div>
    <div>{{this.$appName}} in test2</div>
  </div>
</template>

点击 index.vue中的 change name 再跳转about，about里面还是显示 ‘main in test2’

如果要实现全局变量的功能，需要把属性变为引用类型

src/main.js

Vue.prototype.$appName = { name: 'main' }

此时后面使用 this.$appName.name 会改变引用相应的值，进入 about 后显示 ‘test1 in test2’

4、原型方法的上下文

在 JavaScript 中一个原型的方法会获得该实例的上下文,也就是说可以使用 this 访问：数据、计算属性、方法或其它任何定义在实例上的东西。
示例：

将其用在一个名为 $reverseText 的方法上

1、src/main.js

Vue.prototype.$reverseText = function (propertyName) {
  this[propertyName] = this[propertyName].split('').reverse().join('')
}

// 运算
// var arr = 'Hello'
// arr.split('').reverse().join('')    // 'olleH'

2、index.vue

// 相应组件
<script>
export default {
  data() {
    return{
      message: 'Hello'
    }
  },
  created() {
    console.log(this.message) // => "Hello"
    this.$reverseText('message')
    console.log(this.message) // => "olleH"
  }
}
</script>

5、应用示例

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

6、Vue.prototype、Vue.component和Vue.use区别

6.1、Vue.prototype

在多个地方都需要使用但不想污染全局作用域的情况下，这样定义，在每个 Vue 实例中都可用。

参考：https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

$ 表示这是一个在 Vue 所有实例中都可用的属性，常用于方法、变量等

import echarts from 'echarts'
Vue.prototype.$echarts = echarts 

6.2、vue.component

全局注册组件，第一个参数是调用组件时写的组件名，第二个参数是引入组件时写的名称，可用于注册自定义组件

import myLoading from 'base/loading'
Vue.component('myLoading',myLoading);

6.3、Vue.use

同样是全局注册，和component的区别是接收的参数必须有install方法

常用于注册第三方插件

import ElementUI from 'element-ui';
Vue.use(ElementUI);