vue element Cascader 问题？

Question

是这样的，我遇到一个需求，是用Cascader来写动态加载次级的，但是我不太懂用active-item-change事件，还有就是因为是要获取数据，比如有一个接口是别的页面（A）用的，但是我又想调用它在（B）页面上，可我不想再写同样的接口方法，接口是在Api里面设置的，大概怎么做呢？代码大概是这样的：

//tabs.js
import axios from 'axios';
export functin tabslist(){
下面就是一些地址和参数
}
//A.vue调用
import {tabslist} from 'api/tabs'
//上面是第一次调用了
//B.vue
//这里要用到A.vue的接口方法的数据，但是我不想在写一次A.vue的接口方法，怎么办呢??

还有一个问题就是Cascader 动态次级加载的时候，因为数据都别的页面的数据合在一起的，

<el-cascader
              :options="HouseInfo"
              v-model="CommunityData.selectedOptions"
              @active-item-change="handleItemChange"
              :props="props"
            ></el-cascader>
    //比如是A.vue的小区的name加上+C.vue的楼的building加上+D.vue的层fool成这样的需求怎么实现

它的每一级后台没有给我完整的四级就是value，children这样格式的，只能去请求接口，拼接每一个成那样？不知道怎么下手？

Answer 1

active-item-change是当父级选项变化时触发的事件（即选择项某一级发生改变的时候触发），仅在 change-on-select 为 false 时可用，返回参数为各父级选项组成的数组。
选项拼接问题可以引入VUEX来解决