全局变量和函数定义和使用

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

import SelfComponent from './study/selfComponent/component.vue'

import 'animate.css';

import mitt from 'mitt';

const Mit = mitt();

// TypeScript 注册

// 通过ComponentCustomProperties拓展类型才能有类型提示

declare module "Vue" {

  export interface ComponentCustomProperties {

    $Bus: typeof Mit;

    $env: string

  }

}

const app = createApp(App)

app.component('SelfComponent', SelfComponent) // 注册全局组件

// 全局变量和函数定义，vue2的property已经废除

app.config.globalProperties.$Bus = mitt(); // 全局事件总线

app.config.globalProperties.$filters = {

  format: (target:string) => {

    return 'demo' + target

  }

}

app.config.globalProperties.$env = 'dev'

app.mount('#app')

 

<template>

// 如果在main中没有 declare module的话会ts报错，但实际能够使用

<div>变量{{ $env }}</div>

<div>函数{{ $filters.format('全局变量') }}</div>

</template>

<script setup lang='ts'>

import { ref, reactive } from 'vue'

// script中全局变量和方法使用方式

const app = getCurrentInstance()

console.log(app?.proxy?.$env);

console.log(app?.proxy?.$filters.format('全局变量'));

</script>

<style scoped lang='scss'>

</style>