vue实现定义一个全局实例Vue.prototype
更新时间：2023年07月03日 09:40:42 作者：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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue 大文件分片上传，主要包括断点续传、并发上传、秒传，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
vue2.x版本中computed和watch的使用及关联和区别
这篇文章主要介绍了vue2.x版本中computed和watch的使用及关联和区别，文章围绕主题展开详细的内容介绍，需要的小伙伴可以参考一下2022-07-07
这篇文章主要介绍了vue监听滚动事件的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
今天小编就为大家分享一篇vue.js单文件组件中非父子组件的传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue设计器form-create-designer配置表单默认值示例详解
这篇文章主要介绍了如何使用开源项目form-create-designer来灵活调整表单的默认值,通过config.formOptions,您可以自定义表单的全局布局,文章提供了一个详细的例子,展示了如何使用form-create-designer的配置选项来调整表单的布局和外观,感兴趣的朋友一起看看吧2024-11-11
这篇文章主要介绍了VUE之关于store状态管理核心解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
这篇文章主要介绍了vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了说说Vuex的getters属性的具体用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue router组件状态刷新消失的问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
在 Vue3 项目开发中,事件冒泡经常会导致一些意想不到的问题,本文为大家整理了五个Vue3中阻止事件冒泡的方法,希望对大家有一定的帮助2024-11-11
最新评论