vue動態(tài)組件實現(xiàn)選項卡切換效果
更新時間：2021年09月07日 15:30:59 作者：luckylqh
這篇文章主要為大家詳細介紹了vue動態(tài)組件實現(xiàn)選項卡切換效果的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue動態(tài)組件實現(xiàn)選項卡切換的具體代碼，供大家參考，具體內(nèi)容如下
導航按鈕：
<div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新車</router-link><em></em></p> <p @click="a='tab2'"><router-link to='/collectusedcars'>二手車</router-link><em></em></p> <p @click="a='tab3'"><router-link to='/collectproducts'>車品</router-link></p> </div> <div class="tabs"> <component is:="current"></component> </div>
寫3個子組件分別為
<tab1></tab1> <tab2></tab2> <tab3></tab3>
js里面用局部組件引入這三個子組件
//數(shù)據(jù)里面
data (){
return {
a:'tab1' //默認顯示tab1子組件
}
}
components:{
'tab1':tab1,
'tab2':tab2,
'tab3':tab3
}
如果要從父組件里面往這些字組件里面?zhèn)鲾?shù)據(jù)，和普通的父組件-》子組件傳遞數(shù)據(jù)是一個道理，只不過在這個里面綁定一次屬性，就可以在每個子組件里面都接收到數(shù)據(jù)，例如：
復制代碼 代碼如下:
<component :is="current" :clients-data="client" :refresh-data="getClient" :user-type-data="userTypes"></component>
在子組件里面定義props:[]后，就可以接收到父組件傳來的方法，以及數(shù)據(jù)。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細代碼，感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)指定區(qū)域自由拖拽、打印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在組件中時?？吹紷click.native,在項目中遇到后,簡單介紹下,這篇文章主要給大家介紹了關于Vue中@click.native的使用方法及場景的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue組件之單向數(shù)據(jù)流的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本篇文章主要介紹了在vue中使用jointjs的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue 計數(shù)器的實現(xiàn)，主要利用HTML實現(xiàn)步驟現(xiàn)在頁面上簡單實現(xiàn)一個計數(shù)器，內(nèi)容簡單且詳細,需要的朋友可以參考一下2021-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)滑動到底部加載更多效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉外部鏈接的實現(xiàn)代碼，本文給大家介紹的非常詳細，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vite+vue3代碼風格校驗及格式化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03