Vue中Vue.prototype怎么用

这篇文章将为大家详细讲解有关Vue中Vue.prototype怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如为实例 property 设置作用域来避免这种事情发生。 你还可以根据你的喜好使用自己的约定，诸如为实例property设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如_appName 或 ΩappName，来避免和插件或未来的插件相冲突。

3. 注册和使用全局变量

每个组件都是一个vue实例，Vue.prototype加一个变量，只是给每个组件加了一个属性，这个属性的值并不具有全局性。
比如以下例子：

// main.jsimport Vue from 'vue'import App from './App'import router from './router'import store from './store'Vue.config.productionTip = falseVue.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.jsVue.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 --savenpm install qs.js --save　　//它的作用是能把json格式的直接转成data所需的格式

// mian.jsimport Vue from 'vue'import axios from 'axios'import qs from 'qs'Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axiosVue.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>

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

1、Vue.prototype

在多个地方都需要使用但不想污染全局作用域的情况下，这样定义，在每个 Vue 实例中都可用。
参考：https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
$ 表示这是一个在 Vue 所有实例中都可用的属性
常用于方法、变量等

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

2、vue.component

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

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

3、Vue.use

同样是全局注册，和component的区别是接收的参数必须有install方法
常用于注册第三方插件

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

关于“Vue中Vue.prototype怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。