vue中引入公共方法并使用

Myth丶恋晨 2022-12-10 07:14 313阅读 0赞

### 1、在utils文件夹中新建utils.js ###

/**
     * 通用js方法封装处理两种方式
     * Copyright (c) 2019 ruoyi
     */
    
    /** 第一种方式*/
    function myFun() {
        console.log('this is my function')
    }
    function fn1(){
      console.log("全局方法一")
    }
    
    // 将上面连个全局公共方法，组合成一个对象，并暴露出去
    export default {
        myfun,
        fn1
    }    
    
    /** 第二种方式*/
    export function myFun() {
        console.log('this is my function')
    }
    export function fn1() {
        console.log("全局方法一")
    }

### **2、配置引用** ###

**2.1.1、全局调用**：在main.js 进行配置

/** 第一种挂载方式：*/
    
    import myfun from './utils/utils/myFun'
    import fn1 from './utils/utils/fn1'
    
    Vue.prototype.myfun = myfun;
    Vue.prototype.fn1= fn1;
    
    /** 第二种挂载方式：*/
    import utils from './utils/utils'
    Vue.prototype.commonApi = utils;

**2.1.2 、页面中引用**

text(){
          this.fn1();// 使用fn1方法
           this.myfun() // 使用myfun方法
    
        }
    
    
    text(){
          this.commonApi.fn1();// 使用fn1方法
           this.commonApi.myfun() // 使用myfun方法
        }

2.2 局部调用：在页面中引入

import { myFun}  from 'path'
    // 使用
    myFun()

参考：

[vue中引入公共方法并使用][vue]

[设置Vue全局公共方法][Vue]

[vue]: https://www.cnblogs.com/cazj/p/10906215.html
[Vue]: https://blog.csdn.net/weixin_44869002/article/details/104051304?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-2-104051304.nonecase&utm_term=vue%20%E5%85%A8%E5%B1%80%E6%96%B9%E6%B3%95

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue抽取公共方法

第一步：创建目录utils，在其中新建h-utils.js export default { fun(){ console.log

拼搏现实的明天。/ 2022年12月20日 05:43/ 0 赞/ 190 阅读

相关 vue中引入公共方法并使用

1、在utils文件夹中新建utils.js / 通用js方法封装处理两种方式 Copyright (c) 2019 ruoyi

Myth丶恋晨/ 2022年12月10日 07:14/ 0 赞/ 314 阅读

相关怎样在vuejs里面提取并使用公共方法？

[https://blog.csdn.net/liuxing393724034/article/details/80775065][https_blog.csdn.

我会带着你远行/ 2022年12月03日 01:32/ 0 赞/ 149 阅读

相关 vue引入highCharts并使用

1、安装 npm install highcharts --save 2、components目录下新建一个HighchartsComponent.vue组件

朱雀/ 2022年10月25日 14:20/ 0 赞/ 169 阅读

相关 vue中引入bootstrap

前面发了几篇关于vue引入第三方插件的，自己也练习很多，没想到今天引入bootstrap的时候又犯了低级错误。引入bootstrap步骤也很简单，首先需要修改bu

ゞ浴缸里的玫瑰/ 2022年06月12日 00:17/ 0 赞/ 276 阅读

相关 Vue中引入jq的方法

在vue中引入jq 用vue-cli脚手架工具构建项目成功后当需要引入JQ，可用以下方法： 1.首先在终端里输入 npm install jquery -

男娘i/ 2022年05月21日 02:46/ 0 赞/ 354 阅读

相关 vue中引入echarts

一、全局引入 1.通过以下命令安装Echarts ![在这里插入图片描述][20190429213452843.png] 2.main.js中引入echarts 和

骑猪看日落/ 2022年04月24日 22:10/ 0 赞/ 358 阅读

相关 vue使用scss，并且全局引入公共scss样式

要如何在我们的vue项目中全局引入scss文件呢？ 1. `main.js`可以直接`import css`文件，而不可以直接`import scss`文件。 2. 在i

Myth丶恋晨/ 2022年01月17日 00:39/ 0 赞/ 723 阅读

相关 vue引入全局过滤器，引入全局公共方法，引入全局变量

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

川长思鸟来/ 2021年11月16日 17:38/ 0 赞/ 641 阅读

相关 vue 中引入并简单使用better-scroll

1. 什么是better-scroll better-scroll是一个滚动插件，旨在解决移动端的滚动环境（已经支持PC）。是对iscroll的封装 github地址 ht

墨蓝/ 2021年11月01日 18:22/ 0 赞/ 285 阅读