Vue3+TypeScript学习笔记（二十七）

在以前的Vue2中，我们可以通过Vue.prorotype.变量名的方式来挂载全局变量或函数，不过Vue3中并没有这个功能，取而代之的是app.config.global.globalProperties.变量名的书写方式，在main.ts中定义完毕后，所有的组件实例都可以获取到并能够在模板中直接使用

1. 定义全局变量

   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>

1. 定义全局方法

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>