vue3 注册全局方法定义全局方法

原创已于 2023-08-13 02:08:25 修改 · 2.2w 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

于 2021-10-20 09:50:18 首次发布

vue3实战专栏专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue3中创建一个工具类方法`FormatDate`，用于格式化时间，并将其挂载到全局属性`$formatTime`。首先定义了一个`FormatDate`函数，然后在`main.ts`中引入并挂载到`globalProperties`，使得全局可访问。在页面模板和脚本中可以方便地调用这个全局方法。同时，文章还展示了如何在页面脚本中通过`getCurrentInstance`获取`proxy`对象来使用全局的`$axios`。

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

1.定义工具类

// 格式化时间
function FormatDate (time: string) {
  if (Tool.isNotEmpty(time)) {
    const date = new Date(time)
    // 注意js里面的getMonth是从0开始的
    let FormattedDateTime = null
    const year = date.getFullYear()
    const month = (date.getMonth() + 1)
    const day = date.getDate()
    let h: string | number = date.getHours()
    let m: string | number = date.getMinutes()
    let s: string | number = date.getSeconds()
    h = h < 10 ? '0' + h : h
    m = m < 10 ? '0' + m : m
    s = s < 10 ? '0' + s : s
    FormattedDateTime = year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s
    return FormattedDateTime
  }
  return null
}

2.在main.ts/main.js 中进行引入，并挂载全局方法

在main.ts入口文件进行引入

import { FormatDate } from '@/util/utils'

在这里插入图片描述
2. 挂载到全局方法

vue3 使用 app.config.globalProperties 进行全局方法的定义，全局方法定义后，就无需每个页面使用时，进行单独引用了。

const app = createApp(App)
app.config.globalProperties.$formatTime = FormatDate

3.页面使用

3.1 在template中使用时，可以直接使用

使用在main.ts定义的名称（$formatTime）进行方法的引用
在这里插入图片描述

3.2 在script中使用，需要获取到 getCurrentInstance实例再进行使用

// 在main.js中,进行挂载
app.config.globalProperties.$axios = axios;

// 在页面 script使用
<script setup>
import { ref, getCurrentInstance } from 'vue'

// proxy相当于 vue2的this，从getCurrentInstance 实例中获取，proxy对象
const { proxy } = getCurrentInstance()
const getData = () => {
  proxy.$axios.get("https://www.baidu.com")
}
</script>