通过is切换组件

1.is的作用

解决html模板限制

//正常结构 
<ul>
        <li >home</li>
        <li >current</li>
</ul>
//此时component组件中是li ,但是在语法上component 不算是真实的dom，可能会导致html模板报错 所以这里需要用到is
 <ul>
        <component :text="home"></component>
        <component :text="current"></component>
 </ul>
//is
<ul>
        <li is="component" :text="home"></li>
        <li is="component" :text="current"></li>
</ul>

View Code

2.切换组件

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

<template>
  <div>
    <div>
      <ul>
        <li @click="tab('home')">home</li>
        <li @click="tab('currentTabComponent')">current</li>
      </ul>
    
        <div class="tabCont" :is="currentTabName"></div>
  
    </div>
  </div>
</template>

<script>

import currentTabComponent from "./currentTabComponent.vue";
import home from "./home.vue";
export default {
  name: "index",
  components: {
    currentTabComponent,
    home
  },
  data() {
    return {
      currentTabName: "home",
  
    };
  },
  methods: {
    tab(comName) {
      this.currentTabName = comName;
    }
  }
};
</script>

View Code

 

保持状态的切换组件：

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

 

 

 

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

代码

父组件：

<ul>
        <li @click="tabNav('home')">home</li>
        <li @click="tabNav('currentTab')">currentTab</li>
      </ul>
      <keep-alive>
        <div class="tabCont" :is="tabName"></div>
      </keep-alive>

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;
    }
  }

View Code

子组件

<template>
  <div>
    <ul class="tabNav">
      <li @click="tab('currentTab1')">currentTab1</li>
      <li @click="tab('currentTab2')">currentTab2</li>
    </ul>

    <div class="tabContN" :is="currentTabName"></div>

    <div ></div>
  </div>
</template>

<script>
import currentTab1 from "./currentTab1.vue";
import currentTab2 from "./currentTab2.vue";
export default {
  name: "currentTab",
  components: {
    currentTab1,
    currentTab2
  },
  data() {
    return {
      currentTabName: "currentTab1"
    };
  },
  methods: {
    tab(comName) {
      this.currentTabName = comName;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabContN {
  background: green;
  float: left;
  width: 70%;
}
.tabNav {
  float: left;
  width: 30%;
  text-align: center;
}
.clear {
  clear: both;
}
</style>

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