這篇文章主要為大家介紹了關於利用vue組件自訂v-model實現一個Tab組件的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
前言
最近在學習vue，今天看到自訂元件，糾結了一會會然後恍然大悟...官方教程寫得不是很詳細，所以我決定總結一下。下面話不多說了，來一起看看詳細的介紹吧。
效果
先讓我們來看範例的效果吧！
v-model
我們知道v-model 是vue 裡面的一個指令，vue的v-model是一個十分強大的指令,它可以自動讓原生表單元件的值會自動和你選擇的值綁定，它可以用在input 標籤上，來做資料的雙向綁定，就像這樣：
<input v-model="tab">
v-model 事實上是一個語法糖，你也可以這麼寫：
<input :value="tab" :input="tab = $event.target.value">
可以看得出來，就是傳進去一個參數:value，監聽一個事件@input 而已。
如果有這樣的需求，需要在自己的元件上使用 v-model，就像這樣：
<Tab v-model="tab"></Tab>
如何實現？
現在已經知道 v-model 是語法糖了，那麼首先，我們可以知道在元件內得到的參數。
<!-- Tab.vue --> <template> <p class="tab"> <p>可以試著把這個數值印出來
以上是使用vue如何製作Tab組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
