提示信息

Modal Dialog 关闭后,给父组件传递参数

往事 已关注

在 Vue 中,子组件可以通过触发事件向父组件发送信息。这也适用于 Naive UI 的 n-dialog 组件。

假设你有一个父组件,其中包含一个 n-dialog 对话框作为子组件。你可以在关闭对话框时触发一个自定义事件,并将需要的参数传递给该事件。然后在父组件中监听此事件并处理参数。以下是一个示例:

  1. <!-- 子组件 -->
  2. <template>
  3. <n-dialog v-model:value="show">
  4. <template #action>
  5. <n-button @click="handleClose('Custom Data')">Close</n-button>
  6. </template>
  7. Inside Dialog!
  8. </n-dialog>
  9. </template>
  10. <script setup>
  11. import { ref } from 'vue';
  12. import { NDialog, NButton } from 'naive-ui';
  13. let show = ref(false);
  14. function handleClose(data) {
  15. show.value = false;
  16. emit('close', data); // 触发 close 事件,并向其传递数据
  17. }
  18. </script>
  1. <!-- 父组件 -->
  2. <template>
  3. <child-component @close="handleEvent" /> <!-- 在父组件中监听 close 事件 -->
  4. </template>
  5. <script>
  6. import ChildComponent from './ChildComponent.vue';
  7. export default {
  8. components: {
  9. ChildComponent,
  10. },
  11. methods: {
  12. // 处理从子组件接收到的事件和参数
  13. handleEvent(data) {
  14. console.log(data); // 输出:'Custom Data'
  15. // 这里你可以根据需要处理数据
  16. }
  17. }
  18. }
  19. </script>

在这个示例中,当用户在子组件的对话框关闭时,handleClose('Custom Data') 会被调用。这个函数会触发一个名为 close 的事件,并将 'Custom Data' 作为参数传递给该事件。

然后,在父组件中,我们监听 close 事件,并在 handleEvent 方法中处理从子组件接收到的数据。

    遇到难题? "AI大模型GPT4.0、GPT" 是你的私人解答专家! 点击按钮去提问......
往事 关注 已关注

最近一次登录:2023-12-28 14:03:27   

暂时还没有签名,请关注我或评论我的文章
×
免费图表工具,画流程图、架构图