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>