SOURCE

new Vue({
    el: '#app',
    data () {
        return {
            list1: [
                {name: 'item1', value: 'item1-value'},
                {name: 'item2', value: 'item2-value'}
            ],
            show: 1
        }
    },
    methods: {
        change1 (e) {
            console.log(e)
        },
        change2 (e) {
            console.log(e)
        },
        change3 (e) {
            console.log(e)
        },
        changeShow (val) {
            this.show = Number(val)
        }
    },
    watch: {
        show (val) {
            console.log('show: ' + val)
        }
    }
})

<div id="app">
	<div v-show="show === 1">
		<tab-list :list="list1" @change="change1" />
	</div>
	<div v-show="show === 2">
		<tab-list @change="change2">
			<tab-item value="item3">item3</tab-item>
			<tab-item value="item4">item4</tab-item>
            <tab-item value="item5">item5</tab-item>
		</tab-list>
	</div>
    <div v-show="show === 3">
		<tab-list @change="change3" mode="block">
			<tab-item value="item3">item3</tab-item>
			<tab-item value="item4">item4</tab-item>
            <tab-item value="item5">item5</tab-item>
		</tab-list>
	</div>
	<div style="padding-top: 100px">
        <button @click="changeShow(1)">类型1</button>
        <p>直接传入数组，[{name: xx, value: ''}]</p>
        <button @click="changeShow(2)">类型2</button>
        <p>使用slot的方式，当前子组件是tab-item,可以自行定义</p>
        <button @click="changeShow(3)">类型3</button>
        <p>滑块</p>
	</div>

</div>