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】的主要内容,如果未能解决你的问题,请参考以下文章

vue2升级vue3:vue3创建全局属性和方法

vue3 如何定义全局变量

前端VUE3 在原型上挂载全局方法变量

vue3全局事件总线mitt库

VUE3.0 使用全局快捷键

批量自动化注册全局组件(Vue3)