Vue3+TypeScript学习笔记(二十七)

简介: 本节记录Vue3全局变量(函数)相关的知识点内容

在以前的Vue2中,我们可以通过Vue.prorotype.变量名的方式来挂载全局变量或函数,不过Vue3中并没有这个功能,取而代之的是app.config.global.globalProperties.变量名的书写方式,在main.ts中定义完毕后,所有的组件实例都可以获取到并能够在模板中直接使用

  1. 定义全局变量

    main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
export const app = createApp(App)

app.config.globalProperties.$env = 'env'    // 挂载全局变量

// 写好声明文件(格式是固定的,不写则组件爆红)
declare module 'vue' {
    export interface ComponentCustomProperties {
        $env: string
    }
}
app.mount('#app')

App.vue

<template>
    <div>{{ $env }}</div>    // 模板直接使用$env
</template>

<script setup lang="ts">
</script>

<style scoped></style>
  1. 定义全局方法

main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
export const app = createApp(App)

app.config.globalProperties.$env = 'env'
app.config.globalProperties.$filter = {
    formate<T>(str: T) {
        return `小满的飞机--${str}`
    },
}

// 声明文件,你懂的
declare module 'vue' {
    export interface ComponentCustomProperties {
        $env: string
        $filter: {
            formate<T>(str: T): string
        }
    }
}

app.mount('#app')

若要在组件脚本中使用,需要额外引入一个getCurrentInstance方法来获取当前组件实例,通过app?.proxy?.$filter.formate来调用本例中的formate方法
App.vue

<template>
    <div>{{ $env }}</div>
    <div>{{ message }}</div>
</template>

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

const app = getCurrentInstance()
let message = app?.proxy?.$filter.formate<string>('杯子')
</script>

<style scoped></style>

完整代码:
main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
export const app = createApp(App)

app.config.globalProperties.$env = 'env'
app.config.globalProperties.$filter = {
  formate<T>(str: T) {
    return `小满的飞机--${str}`
  },
}

declare module 'vue' {
  export interface ComponentCustomProperties {
    $env: string
    $filter: {
      formate<T>(str: T): string
    }
  }
}

app.mount('#app')

App.vue

<template>
  <div>{{ $env }}</div>
  <div>{{ message }}</div>
</template>

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

  const app = getCurrentInstance()
  let message = app?.proxy?.$filter.formate<string>('杯子')
</script>

<style scoped></style>
相关文章
|
5月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
3月前
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
|
5月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
52 3
|
5月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
94 1
|
5月前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
92 0
|
5月前
|
JavaScript 前端开发 安全
立等可取的 Vue + Typescript 函数式组件实战
立等可取的 Vue + Typescript 函数式组件实战
|
5月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
209 0
|
5月前
|
JavaScript 测试技术 API
Vue 3 与 TypeScript:最佳实践详解
Vue 3 与 TypeScript:最佳实践详解
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
68 0
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧

热门文章

最新文章