木灵鱼儿

木灵鱼儿

阅读：1652

最后更新：2021/12/23/ 12:56:27

vue3 全局挂载和调用的方式

全局挂载

vue3 对全局挂载做了调整，对全局挂载的方法增加的命名空间，用于独立存放，所以原先通过原型挂载的方式不推荐使用了。

import { createApp } from "vue";


const app = createApp({})
app.config.globalProperties.$http = () => {}

组件内调用

最麻烦的

<script  lang="ts">
import { defineComponent,getCurrentInstance } from  "vue";

export default defineComponent({
  setup() {
    const instance:any = getCurrentInstance(); //一定要先获取

    instance.appContext.config.globalProperties.$http();
  }
});
</script>

在ts中instance可能为null，后面那么多点调用肯定是会报错的，ts也不太熟，不知道怎么整，整个any吧。

有能力可以自己调整下类型推断。

相对省事的

<script  lang="ts">
import { defineComponent,getCurrentInstance } from  "vue";

export default defineComponent({
  setup() {
    const instance:any = getCurrentInstance(); //一定要先获取

    instance.proxy.$http();
  }
});
</script>

通过proxy对象调用。

Provide / Inject

先全局注入

import { createApp } from "vue";


const app = createApp({})
const http =  () => {};
app.provide("http", http);

组件内再引入

<script  lang="ts">
import { inject } from  "vue";

export default defineComponent({
  setup() {
    const http = inject("http") as any; //inject获取的类型推断是unknown，需要自己推断一下，这里可以自己写个推断类型，import引入使用

    http();
  }
});
</script>
文章分类 VUE3
文章标签 provideinjectvue3全局挂载globalPropertiesgetCurrentInstance
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 9获得阅读 1652

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 9
文章被阅读 1652

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目