Modal Dialog 关闭后,给父组件传递参数
在 Vue 中,子组件可以通过触发事件向父组件发送信息。这也适用于 Naive UI 的 n-dialog
组件。
假设你有一个父组件,其中包含一个 n-dialog
对话框作为子组件。你可以在关闭对话框时触发一个自定义事件,并将需要的参数传递给该事件。然后在父组件中监听此事件并处理参数。以下是一个示例:
<!-- 子组件 -->
<template>
<n-dialog v-model:value="show">
<template #action>
<n-button @click="handleClose('Custom Data')">Close</n-button>
</template>
Inside Dialog!
</n-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { NDialog, NButton } from 'naive-ui';
let show = ref(false);
function handleClose(data) {
show.value = false;
emit('close', data); // 触发 close 事件,并向其传递数据
}
</script>
<!-- 父组件 -->
<template>
<child-component @close="handleEvent" /> <!-- 在父组件中监听 close 事件 -->
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
// 处理从子组件接收到的事件和参数
handleEvent(data) {
console.log(data); // 输出:'Custom Data'
// 这里你可以根据需要处理数据
}
}
}
</script>
在这个示例中,当用户在子组件的对话框关闭时,handleClose('Custom Data')
会被调用。这个函数会触发一个名为 close
的事件,并将 'Custom Data'
作为参数传递给该事件。
然后,在父组件中,我们监听 close
事件,并在 handleEvent
方法中处理从子组件接收到的数据。