vue怎么使用動態組件實現選項卡切換效果

本文小編為大家詳細介紹“vue怎么使用動態組件實現選項卡切換效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue怎么使用動態組件實現選項卡切換效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

導航按鈕：

<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里面用局部組件引入這三個子組件

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

如果要從父組件里面往這些字組件里面傳數據，和普通的父組件-》子組件傳遞數據是一個道理，只不過在這個里面綁定一次屬性，就可以在每個子組件里面都接收到數據，例如：

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

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

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

讀到這里，這篇“vue怎么使用動態組件實現選項卡切換效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。