Vue3 函数式弹窗优化

背景

前面文章介绍了如何使用 函数式弹窗，弹窗方式是挂载在了全局，使用了getCurrentInstance方法拿到了全局上下文，进而拿到挂载的dialog进行弹窗操作。getCurrentInstance现在已被官方Vue API隐藏，为内部使用函数，现API已经无法搜索到此方法，尤大也做了解释。

那么可能在后续vue更新中getCurrentInstance会被弃用，所以需要将此方法替换掉。

Vue3 Provide / Inject

• Vue3提供透传的API Provide / Inject 如组件A下有B C D等子组件，且B C D中又其他子组件，这时可以使用Provide / Inject在顶层组件A中进行透传数据，A下面的所有组件可以拿到该数据。

优化函数式弹窗

• 在main.ts中改造：

// 引入函数式弹窗
import Dialog from "@/plugins/dialog";

// 将函数式弹窗全局透传
app.provide("$dialog", Dialog);

• 如何调用：

// 拿到全局透传过来的dialog
const dialog = inject("$dialog") as Function;

// 使用 这里与背景文档几乎相同
dialog( 组件, {
    参数 } ).then();

补充

在弹窗内无法感知Vue全局信息，如全局引入的第三方UI，路由等，或者你想在弹窗中再次使用弹窗，发现透传拿不到。函数式弹窗文章中也说了这些问题，这时可以在创建弹窗时，将这些全局信息以参数形式往弹窗中传递，弹窗中以props拿参数的形式使用。需要改造创建弹窗的方法：

在创建弹窗时，引入这些全局信息，如弹窗函数（参考 函数式弹窗文章）。

import Dialog from "@/plugins/dialog";

// createDialog中的参数options将弹窗也作为参数传递
const vNode = h(component, {
   
    // 改造这里
    ...{
   
    	...options,
        ...{
    dialog: Dialog }
    }
});

此时如要在弹窗中再次弹窗，只需要props接收dialog这个函数参数即可，eg.

// props接收dialog
const props = withDefaults(
	defineProps<{
   
        dialog?: Function;
    }>(),{
   }
);

// 使用
props.dialog( 组件, {
    参数 } ).then();