vue3 挂载全局公共方法/变量/数据

前言：
最近开始接触vue3, 需要全局挂在公共函数，Vue.prototype已经不再适用vue3，官网转而推荐使用 app.config.globalProperties 或者 provide；

app-config-globalproperties 官方地址如下：

https://cn.vuejs.org/api/application.html#app-config-globalproperties

vue3 provide 官方地址如下：

https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide

vue2 provide 官方地址如下：

https://v2.cn.vuejs.org/v2/api/#provide-inject

原文地址：点击文字跳转原文

扫码关注公共号查看原文可以提问

-------------------------正文开始---------------------
1、在 main.js 通过两种方法注入全局函数 asyncDate ，分别利用了 app.config.globalProperties 和 provide 。

注入全局变量示例代码如下：

// main.js

import {
  createSSRApp
} from "vue";
import App from "./App.vue";
import asyncDate from "./common/date.js"
export function createApp() {
  const app = createSSRApp(App);
  // 注入全局 asyncDate
  app.provide('$asyncDate', asyncDate);
  // 挂在全局 $asyncDate 
  app.config.globalProperties.$asyncDate=asyncDate;
  return {
    app
  };
}

// vue3 setup语法

2、获取全局变量示例代码如下：

// vue3 setup语法
<script lang="ts" setup>
import {getCurrentInstance，inject} from 'vue';
const {proxy}=getCurrentInstance();
/* 如果采用 app.config.globalProperties 设置的 $asyncDate ，使用
获取 peoxy.$asyncDate 获取；
*/
let asyncDate=peoxy.$asyncDate;
/* 如果采用 provide 设置的 $asyncDate ，使用获取 inject 获取；
*/
let asyncDate=inject('$asyncDate');
</script>

vue 中的 getCurrentInstance 方法返回了 ctx 和 proxy，控制台打印 ctx 和 proxy 发现和 vue2.x 中的 this 等同，习惯使用 this 的朋友可以用 proxy 进行替代。

3、vue2 语法获取全局变量示例代码如下：

<script>
export default{
  inject: ['$asyncDates'],
  mounted() {
    let asyncDate=this.$asyncDate;
 
  }
}
</script>

3.1 采用 app.config.globalProperties 或者provide 设置的 $asyncDate , 都可以直接使用this 获取；

3.2 如果采用 provide 设置 $asyncDate , 需要配合 inject 一起使用。

provide / inject 注意事项：

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

原文地址：https://blog.csdn.net/TS_144636/article/details/142631456

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！