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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue3的動(dòng)態(tài)組件是如何工作的
- 詳解vue2.0 使用動(dòng)態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁(yè)切換效果（vue-cli）
- vue 動(dòng)態(tài)組件component
- Vue.js動(dòng)態(tài)組件解析
- vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
- vue 動(dòng)態(tài)組件(component :is) 和 dom元素限制(is)用法說明
- Vue 自定義動(dòng)態(tài)組件實(shí)例詳解
- Vuejs第十二篇之動(dòng)態(tài)組件全面解析
- 詳解Vue 動(dòng)態(tài)組件與全局事件綁定總結(jié)
- vue3動(dòng)態(tài)組件使用詳解
相關(guān)文章
vue等兩個(gè)接口都返回結(jié)果再執(zhí)行下一步的實(shí)例
這篇文章主要介紹了vue等兩個(gè)接口都返回結(jié)果再執(zhí)行下一步的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue2導(dǎo)入使用vue-codemirror組件的教程詳解
vue-codemirror是一個(gè)基于Vue的代碼在線編輯器組件,它封裝了CodeMirror編輯器,使得在Vue項(xiàng)目中可以方便地使用CodeMirror,下面我們就來看看vue-codemirror的具體使用吧2024-02-02
在理解淺拷貝和深拷貝淺前，必須先理解基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別，這篇文章主要介紹了Vue淺拷貝和深拷貝實(shí)現(xiàn)方案及區(qū)別對(duì)比分析,需要的朋友可以參考下2023-03-03
vue+element 模態(tài)框表格形式的可編輯表單實(shí)現(xiàn)
這篇文章主要介紹了vue+element 模態(tài)框表格形式的可編輯表單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
使用vite構(gòu)建vue3項(xiàng)目的實(shí)現(xiàn)步驟
通過本文,您可以了解如何使用Vue CLI創(chuàng)建Vue 3項(xiàng)目,配置Vite,利用其優(yōu)勢(shì)進(jìn)行開發(fā),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
Vue 實(shí)現(xiàn)登錄界面驗(yàn)證碼功能
本文通過實(shí)例代碼給大家介紹了Vue 實(shí)現(xiàn)登錄界面 驗(yàn)證碼功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說明
這篇文章主要介紹了element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能
本次需求是做一個(gè)視頻列表，點(diǎn)擊視頻列表播放對(duì)應(yīng)視頻；同時(shí)要求實(shí)現(xiàn)斷點(diǎn)分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能，感興趣的朋友一起看看吧2022-12-12
這篇文章主要介紹了Vue3中插槽(slot)的全部使用方法，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了vue3頁(yè)面加載完成后如何獲取寬度、高度問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04