vue动态组件component详解

附上代码

<template>
  <div class="export-full-data-manage">
    <div class="main">
      <div class="left">
        <ul>
          <li v-for="item in menus" :key="item.value" :class="[item.value===current?'current':'']" @click="handleMenuItemClick(item)">{{item.label}}</li>
        </ul>
      </div>
      <div class="right">
        <component :is="menus[current-1].componentName" />
      </div>
    </div>
  </div>
</template>

<script>
// 组件
import suiFangBiao from './components/suiFangBiao.vue'
import juMinXinXi from './components/juMinXinXi.vue'
export default {
  name: '',
  data () {
    return {
      current: 1,
      menus: [
        {
          value: 1,
          label: '随访表',
          componentName: suiFangBiao
        },
        {
          value: 2,
          label: '居民信息',
          componentName: juMinXinXi
        }
      ]
    }
  },
  methods: {
    handleMenuItemClick (item) {
      this.current = item.value
    }
  }
}
</script>

<style lang="less" scoped>
.export-full-data-manage {
  .main {
    height: calc(100% - 20px);
    width: 100%;
    box-sizing: border-box;
    padding: 0px 20px;
    display: flex;
    .left,
    .right {
      background-color: #fff;
      border-radius: 6px;
      box-sizing: border-box;

      &.left {
        width: 30%;
        padding: 20px;
        ul {
          li {
            padding: 8px 20px;
            margin-bottom: 10px;
            border-radius: 6px;
            cursor: pointer;
            &.current,
            &:hover {
              background-color: #136fe0;
              color: #fff;
            }
          }
        }
      }
      &.right {
        padding: 20px;
        width: 70%;
        margin-left: 20px;
      }
    }
  }
}
</style>