Vue3定义全局函数和变量

定义全局函数

Vue2 和 Vue3 的区别

由于 Vue3 没有 Prototype 属性，所以需要在 main.ts 文件里使用 app.config.globalProperties 去定义全局函数和变量

Vue2：

// 之前 (Vue 2.x)
Vue.prototype.$http = () => {}

Vue3：

// 之后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}

定义一个全局变量，示例如下：

app.config.globalProperties.$env = "dev";

 

在 Vue3 移除了过滤器，定义一个全局函数代替 Filters，示例如下：

app.config.globalProperties.$filters = {
  format<T extends any>(str: T): string {
    return `衔蝉-${str}`;
  }
}

 

以上定义完成后，还需要声明一下文件，不然 TS 无法正确推导类型

type Filter = {
    format<T>(str: T): string
}

// 声明要扩充@vue/runtime-core包的声明
// 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
declare module 'vue' {
    export interface ComponentCustomProperties {
        $filters: Filter;
        $env: string;
    }
}

写好的全局函数或变量，可以直接在其他组件中使用

<template>
  <div>{{ $env }}</div>
  <div>{{ $filters.format("鲜花") }}</div>
</template>

 

想在 setup 里使用全局变量/方法,

可以用 getCurrentInstance 读取到当前实例

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";

// 读取当前实例
const app = getCurrentInstance();
console.log(app?.proxy?.$filters.format("TS"));
console.log(app?.proxy?.$env);

</script>

 

啊快发货快