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中通过vue-router实现命名视图,本文给大家提到了vue-router的原理解析，给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要为大家介绍了vue3鼠标拖拽滑动效果实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill详细教程
富文本编辑器在任何项目中都会用到,下面这篇文章主要给大家介绍了关于vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了vue项目watch内的函数重复触发问题的两种解决方案，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-04-04
vue excel上传预览和table内容下载到excel文件中
这篇文章主要介绍了vue excel上传预览和table内容下载到excel文件中,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
在Vue.js中,实现登录数据的持久化需要使用浏览器提供的本地存储功能,Vue.js支持使用localStorage和sessionStorage来实现本地存储,本文就来介绍一下如何实现,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了Vue路由切换的两种方式,主要包括标签切换和js切换，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-12-12
Vue结合ElementUI实现数据请求和页面跳转功能(最新推荐)
我们在Proflie.vue实例中,有beforeRouteEnter、beforeRouteLeave两个函数分别是进入路由之前和离开路由之后,我们可以在这两个函数之内进行数据的请求,下面给大家分享Vue结合ElementUI实现数据请求和页面跳转功能,感兴趣的朋友一起看看吧2024-05-05
这篇文章主要给大家介绍了关于vue+echarts实现折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-12-12
最新评论