在以前的Vue2中,我们可以通过Vue.prorotype.变量名的方式来挂载全局变量或函数,不过Vue3中并没有这个功能,取而代之的是app.config.global.globalProperties.变量名的书写方式,在main.ts中定义完毕后,所有的组件实例都可以获取到并能够在模板中直接使用
- 定义全局变量
main.ts
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
export const app = createApp(App)
app.config.globalProperties.$env = 'env' // 挂载全局变量
// 写好声明文件(格式是固定的,不写则组件爆红)
declare module 'vue' {
export interface ComponentCustomProperties {
$env: string
}
}
app.mount('#app')
App.vue
<template>
<div>{{ $env }}</div> // 模板直接使用$env
</template>
<script setup lang="ts">
</script>
<style scoped></style>
- 定义全局方法
main.ts
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
export const app = createApp(App)
app.config.globalProperties.$env = 'env'
app.config.globalProperties.$filter = {
formate<T>(str: T) {
return `小满的飞机--${str}`
},
}
// 声明文件,你懂的
declare module 'vue' {
export interface ComponentCustomProperties {
$env: string
$filter: {
formate<T>(str: T): string
}
}
}
app.mount('#app')
若要在组件脚本中使用,需要额外引入一个getCurrentInstance方法来获取当前组件实例,通过app?.proxy?.$filter.formate来调用本例中的formate方法
App.vue
<template>
<div>{{ $env }}</div>
<div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from 'vue'
const app = getCurrentInstance()
let message = app?.proxy?.$filter.formate<string>('杯子')
</script>
<style scoped></style>
完整代码:
main.ts
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
export const app = createApp(App)
app.config.globalProperties.$env = 'env'
app.config.globalProperties.$filter = {
formate<T>(str: T) {
return `小满的飞机--${str}`
},
}
declare module 'vue' {
export interface ComponentCustomProperties {
$env: string
$filter: {
formate<T>(str: T): string
}
}
}
app.mount('#app')
App.vue
<template>
<div>{{ $env }}</div>
<div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from 'vue'
const app = getCurrentInstance()
let message = app?.proxy?.$filter.formate<string>('杯子')
</script>
<style scoped></style>