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ù)。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue動態(tài)組件如何實現(xiàn)選項卡切換效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!