Docs: 咨询Modal点击内部确认去刷新列表和弹窗关闭销毁内部组件的问题

[lztbwlkj]

Documentation is

• Missing
• Outdated
• Confusing
• Not sure?

Explain in Detail

我按照官方文档

<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

const data = ref();

const [Modal, modalApi] = useVbenModal({
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
// 这里我点击，怎么刷新外面得列表呢
    message.info('onConfirm');
    // modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>();
    }
  },
});
</script>
<template>
  <Modal title="数据共享示例">
    <div class="flex-col-center">外部传递数据： {{ data }}</div>
  </Modal>
</template>

Your Suggestion for Changes

• 1、弹窗关闭销毁内部组件这个属性没有吗？我详情绑定的数据，新增得时候怎么初始化呢？
• 2、文档上没有提及弹窗内部点击确定，如何去刷新列表的问题。不知如何去通知页面刷新弹窗外面得列表。

Steps to reproduce

index.vue

<Card class="mb-4" title="表单弹窗示例">
      <p class="mb-3">弹窗与表单结合</p>
      <Button type="primary" @click="openFormModal"> 打开弹窗 </Button>
    </Card>

shared-data-demo.vue

<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

const data = ref();

const [Modal, modalApi] = useVbenModal({
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    message.info('onConfirm');
    // modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>();
    }
  },
});
</script>
<template>
  <Modal title="数据共享示例">
    <div class="flex-col-center">外部传递数据： {{ data }}</div>
  </Modal>
</template>

[jinmao88]

有个form-modal-demo 看看代码 有你问的答案

[lztbwlkj]

有个form-modal-demo 看看代码 有你问的答案

你好，刚才看了form-demo-modal文件代码，openFormModal方法通过设置setData传递数据给modal中的Form，可是并没有看到我Modal中提交表单后如何告诉外界刷新界面的方法。

[jinmao88]

外部组件 在modal.setDate的时候 传入一个回调函数 然后内部form.setState的时候 设置handleSubmit的时候 调用这个函数

[mynetfan]

我觉得这个其实直接用vue的emit抛出自己定义的事件最方便了，代码也更容易阅读

[jinmao88]

都行 没限制 我这个是本身就需要回调

[anncwb]

1. 这种用emit就好，虽然data能做到传递函数，但不是很好。data主要适用于一些打开关闭时机快速传递数据，而不是去watch
2. modal默认关闭应该是销毁的