Vue自定义函数挂载到全局的方法

最新推荐文章于 2025-07-04 14:55:12 发布

原创最新推荐文章于 2025-07-04 14:55:12 发布 · 4k 阅读

9 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍三种在Vue项目中实现全局函数与变量注入的方法，包括使用Vue.prototype、exports.install结合Vue.prototype，以及通过全局变量模块文件的方式。每种方法都提供了具体的实现步骤和代码示例，帮助开发者轻松掌握全局资源的共享技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一: 使用Vue.prototype

在main.js中写入函数

Vue.prototype.myCode = function() {
	...
}

之后再所有的组件中调用函数

this.myCode()

方法二: 使用exports.install + Vue.prototype

首先写好自己的文件 myCode.js

exports.install = function (Vue) {
    Vue.prototype.myCode= function (){
       ...
    }
};

在main.js 引入并使用

import myCode from './myCode'
Vue.use(myCode)

在所有组件中调用函数

this.myCode()

在使用exports.install方法时, 运行报错exports is not defined
解决方法

export default {
    install(Vue)  {
        Vue.prototype.myCode = {
           ...
        }
    }
}

方法三：使用全局变量模块文件

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>