vue3全局属性/方法的创建及使用--app.config.globalProperties(支持ts)

// 在 Vue 3 中使用 TypeScript 创建全局方法或属性
 
// 首先，创建一个全局属性或方法
// 假设我们要添加一个全局方法来格式化日期
function formatDate(date: Date) {
  return date.toISOString().split('T')[0];
}
 
// 然后，在 Vue 应用程序实例上设置 globalProperties
// 假设 app 是 Vue 应用实例
app.config.globalProperties.$formatDate = formatDate;
 
// 现在，在任何组件中，我们可以通过 this 访问这个全局方法
// 例如，在一个组件的模板中
<template>
  <div>{{ $formatDate(new Date()) }}</div>
</template>
 
// 或者在组件的 setup 函数中
import { defineComponent, getCurrentInstance } from 'vue';
 
export default defineComponent({
  setup() {
    const globalProperties = getCurrentInstance()!.appContext.config.globalProperties;
    const formattedDate = globalProperties.$formatDate(new Date());
    // 使用 formattedDate
    return {
      formattedDate
    };
  }
});

这个例子展示了如何在 Vue 3 应用程序中使用 TypeScript 定义一个全局方法，并在组件中如何使用这个全局方法。这种方式可以在多个组件之间共享方法而不需要重复定义。