vue实现定义一个全局实例Vue.prototype
作者：web前端 zxp
这篇文章主要介绍了vue实现定义一个全局实例Vue.prototype，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue定义一个全局实例Vue.prototype
定义与使用
定义：
Vue.prototype.$appName = 'My App'
使用：
this.$appName （任何地方）
使用场景：
你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。
这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用
Vue.prototype.$appName = 'My App'
这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。
如果我们运行：
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})则控制台会打印出 My App。就这么简单！
为什么appName要以$开头？这很重要吗？它会怎样？
$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。
这样做会避免和已被定义的数据、方法、计算属性产生冲突。
vue定义全局方法的三种实现
方法一：使用Vue.prototype
//在mian.js中写入函数
Vue.prototype.getToken = function (){
...
}
//在所有组件里可调用函数
this.getToken();方法二：使用exports.install+Vue.prototype
// 写好自己需要的fun.js文件
exports.install = function (Vue, options) {
Vue.prototype.getToken = function (){
...
};
};
// main.js 引入并使用
import fun from './fun'
Vue.use(fun);
//在所有组件里可调用函数
this.getToken();在用了exports.install方法时，运行报错exports is not defined
解决方法：
export default {
install(Vue) {
Vue.prototype.getToken = {
...
}
}
}方法三：使用全局变量模块文件
Global.vue文件：
<script>
const token='12345678';
export default {
methods: {
getToken(){
....
}
}
}
</script>在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。
<script>
import global from '../../components/Global'//引用模块进来
export default {
data () {
return {
token:global.token
}
},
created: function() {
global.getToken();
}
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。