动态组件绑定实现Tabs切换

使用动态组件绑定实现Tabs切换

在Vue里面实现Tab切换主要有三种方式：

• 使用vue-router适用于大型应用
• 使用动态组件绑定
• 用active用css控制显示和隐藏

今天主要研究使用动态组件的Tab切换，上代码

<template>
    <div>
        <div>
            <span @click="selected('tab1')">tab1</span>
            <span @click="selected('tab2')">tab2</span>
            <span @click="selected('tab3')">tab3</span>
        </div>
            <tab1 :is='current'> //主组件动态绑定其他组件
    </div>
</template>

<script lang="ts">
import tab1 from './lib/tab1.vue';
import tab2 from './lib/tab2.vue';
import tab3 from './lib/tab3.vue';
export default{
  components: {tab1, tab2, tab3},
  data(){
        current:tab1 //传组件
    }
  methods:{
        selected(e){
            this.currtent = e //接受传的组件
      }
    }
}
</script>

使用动态组件绑定可以分为以下几个步骤：

• 在父组件中定义一个主 tab 标签页，用于切换
• 同时为每个 tab 绑定点击事件，传入该 tab 的子组件名
• 最后引入并定义子组件

keep-alive 指令可以将切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。