Vue切換Tab動(dòng)態(tài)渲染組件的操作

更新時(shí)間：2020年09月21日 09:38:41 作者：燈火暗

這篇文章主要介紹了Vue切換Tab動(dòng)態(tài)渲染組件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

使用<component :is="組件名"></component>

結(jié)合Element-UI的導(dǎo)航菜單 :

UI組件

el-menu-item里的index寫對(duì)應(yīng)的組件名

點(diǎn)擊事件@select="handleSelect"

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="Home">首頁(yè)</el-menu-item>
  <el-menu-item index="About">關(guān)于我們</el-menu-item>
</el-menu>
<component :is="activeIndex"></component>

在點(diǎn)擊事件里動(dòng)態(tài)設(shè)置組件名

handleSelect(index) {
  this.activeIndex = index
}

完整代碼

 <template>
  <div id="app">
   <!-- 導(dǎo)航欄 -->
   <el-row class="home_nav" type="flex" justify="flex-start" align="middle">
    <el-col :span="2" :offset="4">
     <div>LOGO</div>
    </el-col>
    <el-col :span="12">
     <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="Home">首頁(yè)</el-menu-item>
      <el-menu-item index="About">關(guān)于我們</el-menu-item>
     </el-menu>
    </el-col>
   </el-row>
   <component :is="activeIndex"></component>
  </div>
 </template>
 
 <script>
 import Home from './components/Home.vue'
 import About from './components/About.vue'
 
 export default {
  name: 'app',
  components: {
   Home,
   About
  },
  data(){
   return {
    activeIndex: "Home"
   }
  },
  methods: {
   handleSelect(index) {
    this.activeIndex = index
   }
  }
 }
 </script>
 <style>
 </style>

補(bǔ)充知識(shí)：vue 動(dòng)態(tài)組件（tabs切換）keep-alive：主要用于保留組件狀態(tài)或避免重新渲染

通過keep-alive 保留數(shù)據(jù)值填寫數(shù)據(jù)時(shí)切換到其他頁(yè)面，后返回當(dāng)前頁(yè)數(shù)據(jù)保留，主要用于保留組件狀態(tài)或避免重新渲染

 
 <!--動(dòng)態(tài)組件-component使用-->
 <div class="app">
 <ul>
  <li @click="currView='home'">首頁(yè)</li>
  <li @click="currView='abount'">關(guān)于我們</li>
 </ul>
 <!--通過keep-alive 保留數(shù)據(jù)值 填寫數(shù)據(jù)時(shí)切換到其他頁(yè)面，后返回當(dāng)前頁(yè)數(shù)據(jù)保留-->
 <keep-alive>
  <component :is="currView"></component>
 </keep-alive>
 </div>

<script type="text/x-Template" id="homeTemp">
   <h2>首頁(yè)數(shù)據(jù)</h2>
</script>
<script type="text/x-Template" id="abountTemp">
   <h2>關(guān)于我們數(shù)據(jù)<input type="text"/></h2>
</script>

<script type="text/javascript">
 var vm=new Vue({
  el:'.app',
  data:{
   currView:"home"
  },
  components:{
   "home":{
     template:"#homeTemp"
   },
   "abount":{
    template:"#abountTemp"
   }
  }
 });
 
</script>