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>