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

1.定义工具类

// 格式化时间
function FormatDate (time: string) {if (Tool.isNotEmpty(time)) {const date = new Date(time)// 注意js里面的getMonth是从0开始的let FormattedDateTime = nullconst 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 : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sFormattedDateTime = year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + sreturn 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>

2021.11.29更新，增加了在页面script中的使用方法

vue3 注册全局方法定义全局方法相关推荐

Scala方法定义，方法和函数的区别，将方法转换成函数
1．定义方法和函数 1.1．定义方法方法的返回值类型可以不写,编译器可以自动推断出来,但是对于递归函数,必须指定返回类型 1.2．定义函数 1.3．方法和函数的区别在函数式编程语言中,函数是 ...
Java方法---定义，重载，传参，递归
Java方法定义 Java方法是语句的集合,这些语句一起执行一个功能. 方法是解决一类问题的步骤的有序组合方法包含于类或者对象中方法在程序中被创建,在其他地方被引用设计方法的原则:方法的本意是功 ...
敏捷思维要点--价值观、原则、敏捷方法定义
总结:敏捷思维由价值观定义,以十二原则为指导,并在不同实践中体现. (1)敏捷思维价值观 (2)敏捷原则 (3)价值观.原则和通用实践之间的关系 (4)敏捷方法定义 "敏捷方法"是 ...
Java 方法的概述-方法的定义-带参数的方法
方法概述方法(method)是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集1.方法必须先创建才可以使用,该过程成为方法定义 2.方法创建后并不是直接可以运行的,需要手动使用后才执 ...
vue全局变量和局部变量,给vue定义全局的方法
vue2.0 全局变量怎么设置? vue2.0设置全局变量的源码如下:VUE介绍:DisplayOptions显示选项:包括线框显示选项框,填充框,线框,平面阴影和平滑阴影.每个对象及显示窗口均可以对 ...
[vue] 怎么给vue定义全局的方法
[vue] 怎么给vue定义全局的方法第一种:挂载到Vue的prototype上.把全局方法写到一个文件里面,然后for循环挂载到Vue的prototype上,缺点是调用这个方法的时候没有提示Obj ...
Vue3定义全局变量/方法
vue3定义全局变量在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过this.$xxx来获取全局变量. 但是在vue3中,这种方法显然不 ...
JavaScript基础08-day10【函数的返回值、实参、立即执行函数、方法、全局作用域、函数作用域、提前声明、this、工厂方法创建对象、构造函数】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
spring框架做全局异常捕获_springboot springmvc抛出全局异常的解决方法
springboot中抛出异常,springboot自带的是springmvc框架,这个就不多说了. springmvc统一异常解决方法这里要说明的是.只是结合了springboot的使用而已.直接上 ...

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

1.定义工具类

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

3.页面使用

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

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

2021.11.29更新，增加了在页面script中的使用方法

vue3 注册全局方法定义全局方法相关推荐

最新文章

热门文章

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

1.定义工具类

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

3.页面使用

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

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

2021.11.29更新， 增加了在页面script中的使用方法

vue3 注册全局方法 定义全局方法相关推荐

最新文章

热门文章

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

2021.11.29更新，增加了在页面script中的使用方法

vue3 注册全局方法定义全局方法相关推荐