Vue切換Tab動態(tài)渲染組件的操作
更新時間：2020年09月21日 09:38:41 作者：燈火暗
這篇文章主要介紹了Vue切換Tab動態(tài)渲染組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用<component :is="組件名"></component>
結合Element-UI的導航菜單 :
UI組件
el-menu-item里的index寫對應的組件名
點擊事件@select="handleSelect"
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="Home">首頁</el-menu-item> <el-menu-item index="About">關于我們</el-menu-item> </el-menu> <component :is="activeIndex"></component>
在點擊事件里動態(tài)設置組件名
handleSelect(index) {
this.activeIndex = index
}
完整代碼
<template>
<div id="app">
<!-- 導航欄 -->
<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">首頁</el-menu-item>
<el-menu-item index="About">關于我們</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>
補充知識：vue 動態(tài)組件（tabs切換）keep-alive：主要用于保留組件狀態(tài)或避免重新渲染
通過keep-alive 保留數據值 填寫數據時切換到其他頁面，后返回當前頁數據保留 ，主要用于保留組件狀態(tài)或避免重新渲染
<!--動態(tài)組件-component使用--> <div class="app"> <ul> <li @click="currView='home'">首頁</li> <li @click="currView='abount'">關于我們</li> </ul> <!--通過keep-alive 保留數據值 填寫數據時切換到其他頁面，后返回當前頁數據保留--> <keep-alive> <component :is="currView"></component> </keep-alive> </div>
<script type="text/x-Template" id="homeTemp"> <h2>首頁數據</h2> </script> <script type="text/x-Template" id="abountTemp"> <h2>關于我們數據<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>
以上這篇Vue切換Tab動態(tài)渲染組件的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue項目,代碼提交至碼云,iconfont的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue 中 filter 與 computed 的區(qū)別與用法解析
這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue Router的懶加載路徑的解決方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue樣式綁定的幾種實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要給大家介紹了關于vue中實現(xiàn)div可編輯并插入指定元素與樣式的相關資料,文中通過代碼以及圖文將實現(xiàn)的方法介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
VSCode寫vue項目一鍵生成.vue模版,修改定義其他模板的方法
這篇文章主要介紹了VSCode寫vue項目一鍵生成.vue模版,修改定義其他模板的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
最近在搭建自己的博客,前端采用Vue技術,發(fā)現(xiàn)首頁加載速度非常之慢,常常達到10S左右,遂開始優(yōu)化之旅,這篇文章主要給大家介紹了關于vue網站優(yōu)化實戰(zhàn)之秒開網頁的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了vue3 axios 實現(xiàn)自動化api配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue使用jsonp抓取qq音樂數據的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
本篇文章主要介紹了vue如何從接口請求數據 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06