vue3中全局方法的使用【真·VUE3】
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3中全局方法的使用【真·VUE3】相关的知识,希望对你有一定的参考价值。
参考技术A 关于VUE3的使用,文档没看完就开始了一个项目,一路走来,见招拆招求百度。
关于全局方法的使用,找了又找,求了又求,依然无解,所以写写心得,我启用了10年前刚上班时候的window对象哇哈哈哈哈,学习之余写感想,欢迎砸锅!
举例:页面我用了vant3组件,通过Toast、Notify、Dialog等举例
无奈人家不支持this啊
但是proxy 只适用于调试,线上会出问题! 因为getCurrentInstance()的返回类型存在null
在main.js中
在vue中使用
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>
以上是关于vue3中全局方法的使用【真·VUE3】的主要内容,如果未能解决你的问题,请参考以下文章