Vue的Tab组件小练习

    今天在学习Vue文档的时候，看到了动态组件中的is特性。

官方文档用它实现了一个小demo。于是我抱着试一试的心态也写了一个比较简易的。

用的是模块化组件机制来实现的，目录文件为

HelloWorld：

<template>
    <div class="tab">
        <button @click="tabView('left')">我是left</button>
        <button @click="tabView('middle')">我是middle</button>
        <button @click="tabView('right')">我是right</button>

        //展示要显示的组件
        <component :is="currentView"></component>
    </div>
</template>

<script>
import Left from './left'
import Middle from './middle'
import Right from '.right'
//引入组件

export default {
    name:'HelloWorld',
    data(){
        return{
            currentView:'left'
        }
    },
    components:{
        Left,
        Middle,
        Right
    },
    methods:{
        tabView(component){
            this.currentView = component
        }
        
    }

}
</script>

left、middle、right 组件内的内容一致，html部分写个根元素div，div包裹要展示信息

这样，一个tab切换就完成了。

在此之前用过v-show写过一次切换，大致是这样的

<ul>
    <li v-for="(item,index) in items" :key="index" :class=' flag === index ? "blue": " " ' @click="tab(index)">{{ item.nav}}</li>
</ul>

<div class="view" v-for="(list,index) in lists" :key="index" v-show="index === flag">
    {{ list.test }}
</div>


<script>
    data:{
        flag:0,
        items:[
            { nav:'left' },
            { nav:'middle' },
            { nav:'right' }
        ],
        list:[
             {  test:'left' },
             {  test:'middle' },
             {  test:'right' }
        ]
    },
    methods:{
        tab(index){
            this.flag = index      
        }
    
    }


</script>

就是通过中间一个变量来判断对应的下标数字是否相等，相等的话就显示。

在个人看来 is属性就类似于：class，根据绑定的值来渲染将要显示的组件。

如有不当之处，还望看到的大佬给予批评。