动态组件单页操作

• 实现效果 http://xboot.exrick.cn/vue-template/single-window
• 详见 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>```