背景
前面文章介绍了如何使用 函数式弹窗,弹窗方式是挂载在了全局,使用了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();