木灵鱼儿

木灵鱼儿

阅读:184

最后更新: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>

版权申明

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

关于作者

站点职位 博主
获得点赞 4
文章被阅读 184

相关文章