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

蔚落 2023-03-13 12:15 8阅读 0赞

## 方法一: 使用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>

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue挂载全局方法

通过this.$db调用指定方法

阳光穿透心脏的1/2处/ 2024年04月22日 22:30/ 0 赞/ 76 阅读

相关 Vue全局定义方法

简单介绍一下Vue全局定义方法以及如何使用！ 1、首先在src目录下新建一个commonjs（用来写多个js文件） ![包含方法的js文件][js] 2、文件内部安排

爱被打了一巴掌/ 2023年10月11日 14:26/ 0 赞/ 48 阅读

相关 Laravel 自定义全局函数

1：在composer.json文件中 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

柔光的暖阳◎/ 2023年10月06日 16:06/ 0 赞/ 55 阅读

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

方法一: 使用Vue.prototype 在main.js中写入函数 Vue.prototype.myCode = function() {

蔚落/ 2023年03月13日 12:15/ 0 赞/ 9 阅读

相关 Vue3.0挂载方法，添加全局属性

根据官方文档描述 `app.config`是一个包含了 Vue 应用全局配置的对象。你可以在应用挂载前修改其属性，方法。 `main.js` // 之前(Vu

古城微笑少年丶/ 2022年12月31日 14:23/ 0 赞/ 428 阅读

相关 vue 全局自定义组件 components

创建组件在/components目录下创建tabBar.vue <template> <div class="barBar-container">

╰半橙微兮°/ 2022年12月10日 01:20/ 0 赞/ 230 阅读

相关 vue全局自定义指令

一、用一个页面放自定义方法 clickStateForm.js / @description 自定义指令v-preventClick 防止重复点击

绝地灬酷狼/ 2022年09月08日 04:55/ 0 赞/ 286 阅读

相关 vue如何让自定义函数挂到全局

在main.js里进行全局注册 Vue.prototype.ajax = function (){} 在所有组件里可调用 this.ajax

Myth丶恋晨/ 2022年05月29日 09:46/ 0 赞/ 231 阅读

相关 Vue定义全局函数、常量

定义全局函数和定义全局变量是相同的，下面截图中将带有自定义函数与变量的定义与调用 1、创建一个自定义函数和变量文件，在该文件中写入方法 ![watermark_type_Z

怼烎@/ 2022年04月05日 15:50/ 0 赞/ 283 阅读

相关 Vue-自定义全局指令和局部指令的方法详解

自定义全局指令语法： `Vue.directive ('Directive_Name',{Hook_Function:callback(el,b

亦凉/ 2021年12月01日 15:12/ 0 赞/ 556 阅读