* 詳見`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>
~~~
