vue2 vue3 全局变量和函数

前言

本篇文章主要介绍了 vue2 和 vue3的全局变量和函数应用，包括vue3 +ts 如何在 setup 中注册使用。

---

vue 2全局变量和函数

注意：可以注册多个多次没有限制

1. 用法：在main.js中注册

//变量
Vue.prototype.msg= 'hello'
//函数
Vue.prototype.fn = function () {
		console.log('我是全局函数hello')
		}

2. 在应用的任意组件模板上都可用，并且也可以通过任意组件实例的 this 访问到

<template>
 <div>
   {{msg}}
 </div>
</template>

export default {
    data () {
   	  return {
   	   msg: this.msg,
   	  }
    },
    mounted(){
    	console.log(this.msg)
    	this.fn()
    }
}

---

vue 3全局变量和函数

官网文档：
app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，此写法在 Vue 3 已经不存在了。与任何全局的东西一样，应该谨慎使用。

如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。

1. 官网用法进阶

vue3+ts常用组合,在全局挂载前需要声明文件

type HTTP = <T extends any>(str: T) => T,
// 声明要扩充@vue/runtime-core包的声明.
// 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $http: HTTP,
    msg:string
  }
}

// 全局的过滤器
app.config.globalProperties.$http= (msg:string) => {
	//dosomething
	return msg + 'world'
}
app.config.globalProperties.msg = 'hello'

重点：记住在搭配ts使用时一定要扩充ComponentCustomProperties接口，不然编辑器会发送警告爆红

2. 这使得 msg 在应用的任意组件模板上都可用，并且也可以通过任意组件实例的 this 访问到：

export default {
  mounted() {
    console.log(this.msg) // 'hello'
  }
}

setup 语法糖中：

<template>
  <div>
    {{ msg }}
    <br />
    {{ $http(msg) }}
    <br />
    {{getGlobal()}}
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
import type { ComponentInternalInstance } from 'vue';

const { appContext } = (getCurrentInstance() as ComponentInternalInstance)


console.log(appContext.config.globalProperties.msg);
console.log(appContext.config.globalProperties.$http);
const getGlobal = () => {
  return appContext.config.globalProperties.$http(appContext.config.globalProperties.msg)
}

展示: