Vue--動態組件實現組件切換

步驟：

1.新建一個tabber組件（主要是創建需要綁定點擊事件的對象）

    1.1添加點擊事件（事件函數需要傳參）

    2.1在methods中添加事件

2.在App.vue中實現切換

   2.1利用動態組件實現切換

   2.2在data中設置切換的組件名稱

   2.3在methods中添加事件

 

tabbe.vue

<template>
<div id="footer">
<ul>
<li @click="handleClick(1)">首頁</li>
<li @click="handleClick(2)">列表頁</li>
<li @click="handleClick(3)">詳情頁</li>
</ul>
</div>
</template>


<script>
export default {
data(){
return{
}
},
methods: {
handleClick(n){
this.$emit("handleToggle",n)
}
},
};
</script>


<style lang="scss">
#footer {
width: 100%;
height: 3.75rem;
background: grey;
position: fixed;
top: 0;
left: 0;
}
ul {
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: space-around;
list-style: none;
}


</style>

App.vue

<template>
<div id="app">
<!-- <AddCon/>
<ListCon/>
<MmmCon/> -->
<!-- 切換網頁時is前有冒號 -->
<component :is="comName"></component>
<TabberCon @handleToggle="togglePage"/>


</div>
</template>


<script>
import AddCon from './components/add.vue';
import ListCon from './components/list.vue';
import MmmCon from './components/mmm.vue';
import TabberCon from './components/tabber.vue';


export default {
name: 'app',
data(){
return{
comName:'AddCon',
}
},
components: {
AddCon,
ListCon,
MmmCon,
TabberCon
},
methods: {
togglePage(n){
switch(n){
case 1:
this.comName = "addCon";
break;
case 2:
this.comName = "listCon";
break;
case 3:
this.comName = "mmmCon";
break;




}
}
},
}
</script>
<style lang="scss">
*{
margin:0;
padding:0;
}
.IndexCon{
  margin-top:3.75rem;
}
</style>