前言
我们开发后台系统，有时候会出现一个页面的弹出层弹出其他其他页面内容的情况，这时候我整理一个比较好的实践。
案例
假设A页面是招聘职位列表页，B页面是应聘简历列表页。
现在我希望A页面的每个职位，都有按钮能弹出一个层，显示B页面的内容，而且只显示该职位的投递简历列表。
每个页面的样子
页面至少有搜索区和内容区两部分。
引入B页面
import DeliverResume from ... 从略
components: {...} 从略
A页面
- 传prop
要给弹层里的B页面传入一个prop queryJobId，值是resumeDialog.queryJobId。
resumeDialog: {
visible: false,
queryJobId: null,
}
- 模板
<DeliverResume :queryJobId="resumeDialog.queryJobId" />
在弹之前，需要先给resumeDialog.queryJobId赋值。
B页面
- props
props: {
queryJobId: {
type: Number,
},
},
- 隐藏搜索区
应使用v-if="!queryJobId"来隐藏搜索区，因为弹层的内容已经是搜索结果，不应再允许继续搜索，如果想继续搜索，应直接访问B页面。
- watch queryJobId
watch: {
queryJobId(newVal) {
this.queryParams.jobId = newVal;
this.handleQuery();
},
},
- created
无脑赋值给queryParams.jobId，然后执行检索。即便正常访问B页面，这句代码适用。
created() {
if (this.queryJobId) {
this.queryParams.jobId = this.queryJobId;
this.handleQuery();
} else {
this.getList();
}
}
