通过is切换组件

1.is的作用

解决html模板限制

//正常结构 

        
home
        
current

//此时component组件中是li ,但是在语法上component 不算是真实的dom，可能会导致html模板报错 所以这里需要用到is
 

        "home">
        "current">
 
//is

        
is="component" :text="home">
        
is="component" :text="current">

2.切换组件

tab切换，通过同台改变is的值 来显示

保持状态的切换组件：

当我选择了currentTab并选择了子组件下的currenttab2以后，切换回home，在切换回来currentTab的时候 自动显示了默认的currentTab1

 在某些情况下，我们需要保留刚刚选择过的选项，所以这里用到了keep-alive

代码

父组件：

        
"tabNav('home')">home
        
"tabNav('currentTab')">currentTab
      
      
        
class="tabCont" :is="tabName">
      

import home from "./home.vue";
import currentTab from "./currentTab.vue";
export default {
  name: "index",
  components: {
    home,
    currentTab
  },
  data() {
    return {
      tabName: "home",

    };
  },
  methods: {
    tabNav(comName) {
      this.tabName = comName;
    }
  }

子组件

　　注意这个  要求被切换到的组件都有自己的名字，不论是通过组件的 name选项还是局部/全局注册。