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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
EventBus是一种发布/订阅事件设计模式的实践,下面这篇文章主要给大家介绍了关于vue3如何使用eventBus订阅发布模式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
Vuex unknown action type报错问题及解决
这篇文章主要介绍了Vuex unknown action type报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
这篇文章主要介绍了有关vue 开发的钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
这篇文章主要介绍了Vue模板内引入的组件样式覆盖失效原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue中{__ob__: observer}对象转化为数组进行遍历方式
这篇文章主要介绍了vue中{__ob__: observer}对象转化为数组进行遍历方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解
本文通过实例代码+图片描述的形式给大家介绍了Vue的实例、生命周期与Vue脚手架（vue-cli）知识,需要的朋友可以参考下2017-12-12
Vue3计算属性computed和监听属性watch区别解析
计算属性适用于对已有的数据进行计算,派生新的数据,并在模板中使用；而监听属性适用于监听数据的变化,并执行一些特定的操作,根据具体的需求和场景,选择适合的机制这篇文章主要介绍了Vue3计算属性computed和监听属性watch,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了关于Vue组件间的常用传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue下使用fullcalendar及简单案例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了Vue表单提交点击事件只允许点击一次的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论