快捷導(dǎo)航

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

更新時(shí)間：2021年09月07日 15:30:59 作者：luckylqh

這篇文章主要為大家詳細(xì)介紹了vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換的具體代碼，供大家參考，具體內(nèi)容如下

導(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è)道理，只不過在這個(gè)里面綁定一次屬性，就可以在每個(gè)子組件里面都接收到數(shù)據(jù)，例如：

復(fù)制代碼代碼如下:

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補(bǔ)充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細(xì)代碼，感興趣的朋友跟隨小編一起看看吧
2022-09-09
vue 公共列表選擇組件,引用Vant-UI的樣式方式
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue實(shí)現(xiàn)指定區(qū)域自由拖拽、打印功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定區(qū)域自由拖拽、打印功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue中@click.native的使用方法及場(chǎng)景
在組件中時(shí)?？吹紷click.native,在項(xiàng)目中遇到后,簡(jiǎn)單介紹下,這篇文章主要給大家介紹了關(guān)于Vue中@click.native的使用方法及場(chǎng)景的相關(guān)資料,需要的朋友可以參考下
2023-11-11
Vue組件之單向數(shù)據(jù)流的解決方法
這篇文章主要介紹了Vue組件之單向數(shù)據(jù)流的解決方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
在vue中使用jointjs的方法
本篇文章主要介紹了在vue中使用jointjs的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
Vue 計(jì)數(shù)器的實(shí)現(xiàn)
這篇文章主要介紹了Vue 計(jì)數(shù)器的實(shí)現(xiàn)，主要利用HTML實(shí)現(xiàn)步驟現(xiàn)在頁(yè)面上簡(jiǎn)單實(shí)現(xiàn)一個(gè)計(jì)數(shù)器，內(nèi)容簡(jiǎn)單且詳細(xì),需要的朋友可以參考一下
2021-10-10
vue實(shí)現(xiàn)滑動(dòng)到底部加載更多效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)到底部加載更多效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
Vue在原窗口與新窗口打開外部鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-02-02
vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式
這篇文章主要介紹了vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03