Vue3 定义全局函数和变量

最新推荐文章于 2024-08-10 00:47:02 发布

是小张呀！

最新推荐文章于 2024-08-10 00:47:02 发布

阅读量1.1k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_52099965/article/details/127460961

版权

本文介绍了在Vue3中如何使用app.config.globalProperties替代Prototype来定义全局变量和函数，通过示例展示了如何定义并使用$filters和$vn。同时，演示了在模板和<script setup>中如何访问这些全局定义的值。

摘要由CSDN通过智能技术生成

globalProperties

由于Vue3 没有Prototype 属性使用 app.config.globalProperties 代替然后去定义变量和函数


// man.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

let app = createApp(App)

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


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


app.config.globalProperties.$filters = {
    format<T>(str: T):string {
        return `我是${str}`
      }
} 

app.config.globalProperties.$vn = '小黑'

app.mount('#app')


<template>
  <div>
    <div>{{$filters.format('1111')}}</div>
  <div>{{ $vn }}</div>
  </div>
</template>

<script setup lang="ts">
// 取出全局定义的值
import { getCurrentInstance, ComponentInternalInstance } from 'vue';
 
const { appContext } = <ComponentInternalInstance>getCurrentInstance()
  
console.log(appContext.config.globalProperties.$vn);
</script>

<style scoped>

</style>