【Vue3】定义全局变量和全局函数

ts 复制代码
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

// 解决 ts 报错
type Filter = {
  format<T>(str: T): string
}
declare module 'vue' {
  export interface ComponentCustomProperties {
    $filters: Filter,
    $myArgs: string
  }
}

app.config.globalProperties.$myArgs = 'args'
app.config.globalProperties.$filters = {
  format<T>(str: T) {
    return `xiuxiu-${str}`
  }
}
app.mount('#app')
html 复制代码
<!-- App.vue -->
<template>
  <div>
    {{ $myArgs }}
    <hr>
    {{ $filters.format('的杯子') }}
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const app = getCurrentInstance()
// 利用组件实例输出{{ $filter.format('的杯子') }}
console.log(app?.proxy?.$filters.format('的杯子'));
</script>

<style scoped></style>
相关推荐
石小石Orz2 分钟前
妙啊!Js的对象属性居然还能用这么写
前端
成熟的API调用专家8 分钟前
cesium 获取鼠标点击位置的经度纬度海拔高度
前端
前端无冕之王13 分钟前
分享 HTML 邮件开发的 15 个踩坑实录
前端·html
dreams_dream14 分钟前
vue2实现背景颜色渐变
前端·javascript·css
中微子19 分钟前
🏆 ES6 异步编程挑战营:从入门到........
javascript
怪可爱的地球人19 分钟前
TypeScript 函数function
前端
Delroy42 分钟前
CSS Grid布局:从魔方拼图到网页设计大师 🎯
前端·css
拜晨1 小时前
类型体操的实践与总结: 从useInfiniteScroll 到 InfiniteList
前端·typescript
月弦笙音1 小时前
【XSS】后端服务已经加了放xss攻击,前端还需要加么?
前端·javascript·xss
code_Bo1 小时前
基于vueflow实现动态添加标记的装置图
前端·javascript·vue.js