vue 相邻div的选项卡

Posted 2021-01-02 wulzt

终于找到了不是父子div做选项卡的方法了！！！

html

    <div id="mybox">
      <ul class="up">
        <li v-for="(item,index) in items"
          @mouseenter="tab(index,item.view)">
          {{item.type}}
        </li>
      </ul>
      <div class="down">
        <component :is="currentView"></component>
      </div>
    </div>

js

Vue.component(‘child1‘, {
      template: "<p>this is child1</p>"
    })
    Vue.component(‘child2‘, {
      template: "<p>this is child2</p>"
    })
    Vue.component(‘child3‘,{
      template:"<p>this is child 33</p>"
    })

    new Vue({
      el: ‘#mybox‘,
      data: {
        curId: 0,
        currentView: ‘child1‘,
        items:[
          {type:‘A‘,view:‘child1‘},
          {type:‘B‘,view:‘child2‘},
          {type:‘C‘,view:‘child3‘},
          {type:‘D‘,view:‘child4‘},
        ],
      },
      methods:{
        tab(index,view){
          this.curId = index;
          this.currentView = view
        }
      }
    })

如果是用vue-cli
可以抽出为一个vue文件
例如home.vue中有一个选项卡，其中三个选项，内容很复杂
//home.vue

import child1 from ‘./child1.vue‘
import child2 from ‘./child2.vue‘
import child3 from ‘./child3.vue‘

export default{
    //其他省略
    components:{
    child1,
    child2,
    child3,
  },
}

//child1.vue

<template>
<div>
    <h1>hellohellohey</h1>
    <h2>请给我舞台</h2>
</div>
</template>