【vue】弹窗组件的几种调用方式

2024-06-27 05:09| 来源: 网络整理| 查看: 265

写在前面

本文仅代表个人对vue组件的一些粗浅认识，仅供参考，如有错漏，欢迎指出。

vue 弹窗组件的几种调用方式 1. 同一组件调用 Click to open the Dialog Cancel Confirm import { ref } from 'vue' import { ElMessageBox } from 'element-plus' const dialogVisible = ref(false) const handleClose = (done: () => void) => { ElMessageBox.confirm('Are you sure to close this dialog?') .then(() => { done() }) .catch(() => { // catch error }) }

缺点：弹窗代码在父组件中，导致代码较多

2.父子组件调用

父组件

点击出现弹窗 import { ref } from 'vue'; import Dialog from './components/Dialog.vue'; const visible = ref(false) const clickBtn = () => { visible.value = true } const close = () => { visible.value = false } const submit =() => { visible.value =false }

子组件

取消确定 const props = defineProps( { visible: Boolean}) const emit = defineEmits(['update:visible']) const close =() => { emit('update:visible') }

缺点：需要一个变量控制子组件展示隐藏，耦合重

3.父组件调用子组件方法

子组件暴露弹窗打开关闭方法

取消确定 import {ref} from 'vue' const emit = defineEmits(['submit']) const visible = ref(false) const open = () => { visible.value = true } const close =() => { visible.value = false } const submit = () => { visible.value = false emit('submit', [123]) } defineExpose({open, close})

父组件通过ref调用

点击出现弹窗 import { ref } from 'vue'; import Dialog2 from './components/Dialog2.vue'; const dialogRef = ref() const clickBtn = () => { dialogRef.value.open() } const submit =(list) => { console.log('list :>> ', list); dialogRef.value.close() }

缺点：需要知道子组件暴露的方法，不利于解耦

4.函数式调用

子组件

取消确定 import {onMounted, ref} from 'vue' interface Props { close?: () => void, submit?: (list:any) => void } const props = defineProps( ) const visible = ref(false) onMounted( () => { visible.value = true }) const close =() => { visible.value = false props?.close?.() } const submit = () => { visible.value = false props?.submit?.([123]) }

index.ts: 动态调用

import Dialog3 from './Dialog3.vue' import { createApp } from 'vue'; const useDialog = (options: any) => { const mountNode = document.createElement('div') document.body.appendChild(mountNode) return new Promise((resolve, reject) => { let app: any = createApp(Dialog3, { ...options, close: () => { app.unmount() mountNode.remove() app = undefined reject() }, submit: (list: any) => { app.unmount() mountNode.remove() app = undefined resolve(list) } }) if (app) { app.mount(mountNode) } }) } export default useDialog

父组件中使用

点击出现弹窗 import useDialog from './index.ts' const clickBtn = () => { useDialog({}).then(list => { console.log('object :>> ', list); }) }

优点：需要使用组件式才调用，只需要传递props，不需要了解子组件内部逻辑很多组件都是使用这种思想，如element-plus的MessageBox

【本文地址】

公司简介

联系我们