* 详见`src/views/xboot-vue-template/single-window/singleWindow.vue`文件,原理主要通过条件判断渲染显示各组件 * index中 ~~~ <template> <div class="search"> <add v-if="currView=='add'" @close="currView='index'" @submited="submited"/> <edit v-if="currView=='edit'" @close="currView='index'" @submited="submited" :id="id"/> <Card v-show="currView=='index'"> ... </Card> </div> </template> <script> import add from "./add.vue"; import edit from "./edit.vue"; export default { name: "single-window", components: { add, edit }, data() { return { id: "", currView: "index", ... }; }, methods: { init() { this.getDataList(); }, submited() { this.currView = "index"; this.getDataList(); }, ... add() { this.currView = "add"; }, edit(v) { if (!v.id) { this.$Message.error("id不能为空"); return; } this.currView = "edit"; this.id = v.id; } }, mounted() { this.init(); } }; </script> ~~~ * add.vue中 ~~~ <template> <div> <Row> <Card> <div slot="title"> <a @click="close" class="back-title"> <Icon type="ios-arrow-back" style="margin: 0 0 2px 0"/>返回 </a> </div> ... </Card> </Row> </div> </template> <script> export default { ... methods: { // 触发关闭组件返回 close() { this.$emit("close", true); }, // 提交成功触发关闭组件返回 submited() { this.$emit("submited", true); } }, mounted() { this.init(); } }; </script> ~~~