vue中完美实现多组件动态调用渲染

<template>
  <div class="top">
    <div class="top_div">
      <div style="background-color:coral;">
        <img style="width: 50px;height: 50px" src="../assets/logo.png">
      </div>
      <div class="top_b" style="background-color:lightblue;">
        <div v-for='(item,index) in arrl'
             :class='{itemhover:index===isactivel}'
             @click='lfn(index)'>
          {{item}}
        </div>
      </div>
    </div>
    <div id="left">
      <div class="left_div" style="background-color:coral;">
        {{arrl[isactivel]}}
      </div>
      <div class="center_div" style="background-color:lightblue;">
        <div class="center_div_header">
          <div v-for='(item,index) in arr[isactivel]'
               :class='{itemhover:index===isactive}'
               @click='fn(index)'>
            {{item}}
          </div>
        </div>
        <div class="center_div_body">

          <div v-show=show_list[index] v-for='(item,index) in arr[isactivel]'
               :class='{itemdisplay :index===isactive}'>
            <component :is="currentView"></component>
          </div>
          </div>
        </div>
      </div>
    </div>

</template>
<script>
  import CommentSetting from './CommentSetting'
  export default {

    name: 'ting',
    table_title: [16, 17, 18, 19],
    data () {
      return {
        itemhoverindex: null,
        isactive: 0,
        isactivel: 0,
        isactivell: 0,
        arr: [['home','post','archive',"home"],['home','post','archive',"home"],['home','post','archive',"home"],['home','post','archive',"home"]],
        arrl: ['111','222','333','444'],
        show_list: [1,0,0,0],
        cindex:0,
        table_list:[['home','post','archive',"home"],['home','post','archive',"home"],['home','post','archive',"home"],['home','post','archive',"home"]],


      }
    },
    methods: {

      lfn: function (index) {

        this.show_list=[0,0,0,0]
        this.show_list[0]=1
        this.isactive=0
        this.isactivel = index

        console.log(this.isactivel,this.isactive)
      },
      fn: function (index) {
        this.show_list=[0,0,0,0]
        this.show_list[index]=1
        this.isactive = index
      }



    },
    components: {
      'home':CommentSetting,
      "post":CommentSetting,
      "archive":CommentSetting
    },
    computed:{
      currentView(){
        return this.table_list[this.isactivel][this.isactive];
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top {
    border: 0;
    display: flex;
    flex-direction: row;
  }

  .top .top_div {
    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top .top_div div {
    width: 150px;
    height: 50px;
  }

  #left {

    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top #left .left_div{

    height:50px;
  }


  .top #left .center_div {
    height: 800px;
    width: 800px;
    display: flex;
    flex-direction: column;

  }

  .top #left .center_div .center_div_body {
    width: auto;
    height: 800px;
  }


  .top #left .center_div .center_div_header {
    width: auto;
    display: flex;
    flex-direction: row;
  }

  .top #left .center_div .center_div_header div {
    width: 80px;
    background-color: salmon;
  }

  .top .top_div .top_b {
    height: auto;
    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top .top_div .top_b div {
    width: 150px;
    background-color: darkgray;
  }

  .itemhover {
    background-color: fuchsia !important;
    color: cornflowerblue !important;
    height: 50px;
  }

  .itemdisplay {
    display: block;
    height: 800px;
    background-color: burlywood;
  }
</style>