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

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

成都創(chuàng)新互聯(lián)服務(wù)緊隨時代發(fā)展步伐，進行技術(shù)革新和技術(shù)進步，經(jīng)過十多年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計師、專業(yè)的網(wǎng)站實施團隊以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對網(wǎng)站進行成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、建設(shè)、維護、更新和改版，實現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎ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個子組件分別為

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

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

文章名稱：vue動態(tài)組件怎么實現(xiàn)選項卡切換效果
網(wǎng)址分享：http://muchs.cn/article8/ighcop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站改版、網(wǎng)站維護、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)