vue3 多标签的界面里 不同组件之间进行动态切换实例

1、首先创建三个vue 分别为left.vue, midder.vue, right.vue其内容如下：

<script >
export default {
  name:"midder"   // 注意这里边的name必不可少
}
</script>

<template>
 <div>midder</div>
</template>
<style>
a{
  background-color: deeppink;
}
</style>


<template>
<div>left</div>
</template>
<script>
export default {
  name: 'left',
}
</script>
<style scoped lang="less">

</style>



<template>
  <div>right</div>
</template>
<script>
export default {
  name: 'right',

}
</script>
<style scoped>

</style>

2、在app.vue中导入并使用vue自带的component标签，app.vue其内容如下：

<template>
  <div class="outer">
    <div class="container">
      <div :class="{left:true, active: active_name==='left'}" @click="click_item('left')" >left</div>
      <div :class="{midder: true, active: active_name==='midder'}" @click="click_item('midder')">midder</div>
      <div :class="{right: true, active: active_name==='right'}" @click="click_item('right')">right</div>
    </div>
    <component :is="active_name"></component>
  </div>
</template>


<script>
import left from '@/components/left.vue'
import midder from '@/components/midder.vue'
import right from '@/components/right.vue'
import { ref} from "vue";
export  default {
  components:{
    left,midder,right
  },
  setup(){
    const  active_name = ref('left')
    const click_item = (item)=>{
      active_name.value = item
    }
    return{ active_name,  click_item}
  }
}



</script>

<style lang="less" scoped>
.outer{
  height: 400px;
  border: 2px solid black;
  .container{
    display: flex;
    text-align: center;
    line-height: 40px;
    .left{
      width: 200px;
      height: 40px;

    }
    .midder{
      width: 200px;
      height: 40px;
    }
    .right{
      width: 200px;
      height: 40px;
    }
    .active{
      border-bottom: 2px solid pink;
    }
  }
}
</style>

效果展示如下：

补充说明：这个component是通过is来判断是否和当前的组件名字一样，一样就显示当前组件的名字的内容。所以每个组件内部的名字很重要哦