使用vue如何製作Tab組件

這篇文章主要為大家介紹了關於利用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中文網其他相關文章！