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

這篇文章主要講解了“怎么用vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果”吧！

導(dǎo)航按鈕：

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

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

感謝各位的閱讀，以上就是“怎么用vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！