Vue3挂载全局方法和组件使用
前言
在Vue3项目中,需要频繁使用某一个方法。配置到全局感觉会方便很多。
例如:因为很多页面都需要对时间进行格式,所以将时间格式函数配置到全局
一、在mian.ts(mian.js)中配置全局变量
app.config.globalProperties.xxx上绑定你自定义的方法名,一般使用$开头,来区分组件中方法
代码如下(示例):
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(store)
app.use(router)
app.config.globalProperties.$filters = {
foo() {
console.log('foo')
},
formatTime(value: string) {
return '2023-02-22'
}
}
app.mount('#app')
其实也能对全局配置的这些变量进行封装,因为许多的配置写都到mian.js文件中会显得很杂乱。
1、如何封装
首先在src下面创建global文件并在下创建index.ts与register-properties.ts两个文件。
mian.ts代码:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { globalRegister } from './global'
const app = createApp(App)
// 全局注册(默认会将app传递给globalRegister作为参数)
app.use(globalRegister)
app.use(store)
app.use(router)
app.mount('#app')
register-properties.ts代码:
import { App } from 'vue'
// App是用来确定类型
export default function registerProperties(app: App) {
app.config.globalProperties.$filters = {
foo() {
console.log('foo')
},
formatTime(value: string) {
return '2023-02-22'
}
}
}
index.ts代码:
import { App } from 'vue'
import registerProperties from './register-properties'
export function globalRegister(app: App): void {
app.use(registerProperties)
}
index.ts的作用是用来统一注册
二、如何调用
1.template中调用
代码如下(示例):
<template>
<div class="user">
{{ $filters.formatTime('2022-12-23') }}
</div>
</template>
2.在script标签中如何拿到
代码如下(示例):
<script lang="ts">
import { defineComponent, getCurrentInstance } from 'vue'
export default defineComponent({
setup() {
const comp = getCurrentInstance()
// 打印看一下结构
console.log('comp', comp)
return {}
}
})
</script>
中实例里面拿到
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhigkbje
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11