vue tab切换布局

 

页面

功能

点击tab1和tab2，content内容切换content1和content2

<template>
    <div>
        <div class="tab">
            <div>tab1</div>
            <div>tab2</div>
        </div>
        <div class="conten">
            <content1 :contentlist1="list1"></content1>
            <content2 :contentlist2="list2"></content2>
        </div>
    </div>
</template>

<script>
import content1 from "XXXX"
import content2 from "XXXX"
export default {
    name: "tab",
    data() {
        return {
            list1: [],
            list2: []
        }
    },
    components: {
        content1,
        content2
    }
};
</script>