外贸网站模cms建站系统
1.需求：
- 当执行 this.isOpenArchives = true 打开子组件弹窗时，等待子组件关闭并回传数据后，才继续往下执行后续逻辑（即实现“同步等待”效果）。
- 子组件关闭时能回传数据给父组件。
2.流程详细概要：
2.1.父组件中打开子组件窗口
async uf_add_brda(as_klx, as_kh, as_sfzh){
// 打开子组件窗口
this.isOpenArchives = true;
// data 就是子组件回传的数据
const { confirmed, data } = await this.showArchivesDialog();
// confirmed 为true是sucess调用，反之为close调用
if (!confirmed) return;// 取出data中封装的数据
lstr_out = data.lstr_mess// 这里写后续逻辑
// .
// .
// .
}
const { confirmed, data } = await this.showArchivesDialog();
if (confirmed) {
// data 就是子组件回传的数据
// 这里写后续逻辑
}
这样，只有等子组件关闭并回传数据后，后续代码才会继续执行，完全等价于 PB 的同步弹窗+数据回传。
2.1.1在组件中引入子组件
// 省略
// .
// .
// .
<m-dialog :title="dialogTitle" v-model.sync="isOpenArchives" top="10vh" show-footer :closeOnModal="false"
:destroyOnClose="false">
<Archives v-if="isOpenArchives" :inTheDialog="true" :pget="pget" ref="archives" @close="isOpenArchives = false" @success="isOpenArchives = false">
</Archives>
</m-dialog>
// 省略
// .
// .
// .
import MDialog from "../../../components/MForm/MDialog.vue";
import Archives from "../archives/index.vue";
// 省略
// .
// .
// .
export default {
components: {
DynamicQuery,
OutpatientReturnReg,
Archives,
FpSet,
MDialog,
Charge,
},
// 省略
// .
// .
// .
}
2.1.2封装弹窗显示方法
// 封装弹窗显示方法（返回Promise）
async showArchivesDialog() {
// 打开子组件弹窗
this.isOpenArchives = true;
await this.$nextTick(); // 关键！
if (!this.$refs.archives) {
return { confirmed: false };
}
return new Promise((resolve) => {
this.$refs.archives.$once('success', (data) => {
this.isOpenArchives = false;
resolve({ confirmed: true, data });
});
this.$refs.archives.$once('close', () => {
this.isOpenArchives = false;
resolve({ confirmed: false });
});
});
},
1. 不要直接用 this.isOpenArchives = true，而是用 await this.showArchivesDialog()。
2. 子组件（Archives）里，关闭弹窗时用 $emit('success', data) 或 $emit('close')，父组件就能收到。
2.1.3子组件代码
<template>
<Container leftWidth="100%" :topVisibel="!inTheDialog">
<template #top>
<div>
<m-button name="save" :disabled="saveDisabled" :loading="saveLoading" :debounceTime="1000" :isDebounce="true" @click="save"
>保存</m-button
>
<m-button
name="save"
:disabled="saveDisabled"
:loading="saveLoading"
:isDebounce="true"
:debounceTime="1000"
@click="save(1)"
v-if="currentId === ''"
>保存并关闭</m-button
>
<m-button name="close" @click="$tab.closePage()">关闭</m-button>
</div>
</template>
<template #left>
<div class="left-layout" v-loading="formLoading">
<div class="footer" v-if="inTheDialog">
<div>
<m-button name="" v-if="currentId === ''" @click="clearForm"
>清空</m-button
>
<el-checkbox
v-model="isShowJhInfo"
style="margin-left: 20px"
class="btn-ml"
>监护人信息</el-checkbox
>
</div>
<div>// 下面的save和close方法处理完成后会关闭窗口，将数据返回给父窗口
<m-button name="save" :isDebounce="true" :debounceTime="1000" @click="save" :loading="saveLoading">保存</m-button>
<m-button name="close" @click="close">关闭</m-button>
</div>
</div>
</div>
</template>
<m-dialog
:title="dialogTitle"
v-model.sync="showDAXZ"
top="10vh"
show-footer
appendToBody
:closeOnModal="false"
:destroyOnClose="false"
>
<archivesDAXZ
v-if="showDAXZ"
:pget="daxzPget"
:inTheDialog="true"
ref="daxzRef"
@copySuccess="copySuccess"
@close="showDAXZ=false">
</archivesDAXZ>
</m-dialog></Container>
</template>
save方法
async save(isSave) {try{await jdbq_jd(modifyParams).then((res) => {this.saveLoading = false;this.$message.success("保存成功");// 调用父组件中的success方法并返回数据this.$emit("success", res.data);if (isSave === 1) {this.$tab.closePage();}if (!this.inTheDialog) {this.clearForm();}});}finally{this.saveLoading = false;}// 关闭页面this.$emit("close");},
close方法
close() {
// 调用父组件中的close方法this.$emit("close");
},
3.子组件如何回传数据？
在 Archives 组件里，关闭弹窗时这样写：
// 成功时
this.$emit('success', data);
// 取消时
this.$emit('close');
4.补充解释this.$refs.archives.$once
这段代码 this.$refs.archives.$once是 Vue.js 中的语法，其含义如下：
4.1 解释this.$refs.archives
this：指向当前 Vue 组件实例。
$refs：Vue 的特殊属性，用于访问模板中通过ref注册的 DOM 元素或子组件。
archives：模板中定义的ref名称，例如：
<child-component ref="archives" />
<!-- 或 -->
<div ref="archives"></div>
结果：
this.$refs.archives获取名为archives的子组件实例或 DOM 元素（通常用于访问子组件）。
4.2 解释$once
$once 是 Vue 实例的方法，用于监听一个自定义事件，但仅触发一次。触发后监听器会自动移除。语法：
vm.$once(eventName, callback)eventName：要监听的事件名称（字符串）。callback：事件触发时执行的回调函数。
4.3完整含义
this.$refs.archives.$once表示：
在子组件 archives上注册一个一次性事件监听器。当 archives子组件内部触发指定事件时，父组件的回调函数会执行一次，随后自动解除监听。
4.4典型使用场景
// 父组件中
this.$refs.archives.$once('some-event', (payload) => {
console.log('事件仅触发一次！', payload);
});
子组件如何触发？
在子组件（archives）内部，通过 $emit触发事件：
this.$emit('some-event', { data: '传递的数据' });
4.5⚠️ 注意事项
Vue 3 的变化在 Vue 3 中，
使用$on、$once和$off已被移除（RFC）。替代方案：v-on:event.once 在模板中：
<child-component @some-event.once="handleEvent" />
手动实现一次性监听（在 setup 或方法中）：
import { onMounted } from 'vue';
setup() {
const handleEventOnce = (payload) => {
console.log(payload);
// 移除监听逻辑...
};
// 在适当位置手动调用 $on 并移除（需自己实现）
2. 确保 $refs可用$refs在组件渲染完成后才填充，避免在 created生命周期中使用（建议在 mounted或事件回调中使用）。
4.6总结
this.$refs.archives.$once：在子组件archives上绑定一个一次性事件监听器。用途：适用于只需响应一次的事件（如弹窗关闭、初始化完成通知等）。
Vue 3 用户：改用模板的
.once修饰符或手动事件管理。
5.总结
- 用 await this.showArchivesDialog() 实现“同步等待弹窗关闭并回传数据”。
- 子组件用 $emit('success', data) 或 $emit('close') 回传数据/关闭信号。