vue的动态组件 !is的使用

<template>
<div class="app-container" v-loading="loading">
  <div>
    <div class="baseSet">
      <el-menu :default-active="currentView"  mode="horizontal" @select="handleSelect">
      <el-menu-item v-for="(  Item,Index) in tabList" :key="Index" :index="Item.label">{{Item.name}}</el-menu-item>
    </el-menu>
    </div>
    <div>
      <!--动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。-->
      <div :is="currentView"></div>
    </div>
  </div>
</div>
</template>

<script>
  // 导入子组件
  import basecardSet from './cardBaseSet'
  import basememberSet from './memberInfoSet'
  import basestoreSet from './storeCashierSet'
  export default {
    components: {
      basecardSet,
      basememberSet,
      basestoreSet
    },
    watch: {
      // currentView (val) {
      //   console.log(val)
      // }
    },
    data () {
      return {
        tabList: [{
          name: '基础设置',
          label: 'basecardSet'
        }, {
          name: '门店收银',
          label: 'basestoreSet'
        }, {
          name: '会员资料',
          label: 'basememberSet'
        }],
        currentView: 'basecardSet'
      }
    },
    created () {
      this.currentView = this.$route.query.type || 'basecardSet'
    },
    methods: {
      handleSelect (key, keyPath) {
        this.currentView = key
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>