vue動(dòng)態(tài)組件怎么實(shí)現(xiàn)選項(xiàng)卡切換效果

這篇文章主要介紹了vue動(dòng)態(tài)組件怎么實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue動(dòng)態(tài)組件怎么實(shí)現(xiàn)選項(xiàng)卡切換效果文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

導(dǎo)航按鈕：

<div class="tab-title"> 
   <p @click="a='tab1'"><router-link to='/collectnewcars'>新車(chē)</router-link><em></em></p>
   <p @click="a='tab2'"><router-link to='/collectusedcars'>二手車(chē)</router-link><em></em></p>
   <p @click="a='tab3'"><router-link to='/collectproducts'>車(chē)品</router-link></p>
  </div>

<div class="tabs">
 <component is:="current"></component>
</div>

寫(xiě)3個(gè)子組件分別為

<tab1></tab1>
<tab2></tab2>
<tab3></tab3>

js里面用局部組件引入這三個(gè)子組件

//數(shù)據(jù)里面
data (){
 return {
  a:'tab1'  //默認(rèn)顯示tab1子組件
 }
}
components:{
 'tab1':tab1,
 'tab2':tab2,
 'tab3':tab3
}

如果要從父組件里面往這些字組件里面?zhèn)鲾?shù)據(jù)，和普通的父組件-》子組件傳遞數(shù)據(jù)是一個(gè)道理，只不過(guò)在這個(gè)里面綁定一次屬性，就可以在每個(gè)子組件里面都接收到數(shù)據(jù)，例如：

<component :is="current" :clients-data="client" :refresh-data="getClient" :user-type-data="userTypes"></component>

在子組件里面定義props:[]后，就可以接收到父組件傳來(lái)的方法，以及數(shù)據(jù)。

關(guān)于“vue動(dòng)態(tài)組件怎么實(shí)現(xiàn)選項(xiàng)卡切換效果”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue動(dòng)態(tài)組件怎么實(shí)現(xiàn)選項(xiàng)卡切換效果”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。