How to make Tab component using vue

This article mainly introduces you to the relevant information about using vue components to customize v-model to implement a Tab component. The article introduces it in detail through sample code, which has certain reference learning value for everyone's study or work. Friends who need it, please follow the editor to learn together.

Preface

I have been learning vue recently. I saw custom components today. I struggled with them for a while and then suddenly realized...Official tutorial written It's not very detailed, so I decided to summarize it. Not much to say below, let’s take a look at the detailed introduction.

Effect

Let us take a look at the effect of the example first!

v-model

We know that v-model is an instruction in vue. vue’s v-model is a very powerful instruction, which can automatically make native The value of the form component is automatically bound to the value you choose. It can be used on the input tag to do two-way binding of data, like this:

<input v-model="tab">

v-model is actually a syntactic sugar. You can also write like this:

<input :value="tab" :input="tab = $event.target.value">

As you can see, it is just passing in a parameter: value and monitoring an event @input.

If you have such a requirement, you need to use v-model on your own component, like this:

<Tab v-model="tab"></Tab>

How to implement it?

Now that we know that v-model is syntax sugar, first, we can know the parameters obtained within the component.

<!-- Tab.vue -->
<template>
<p class="tab">
</p>
<p>You can try to print this value</p></template>

The above is the detailed content of How to make Tab component using vue. For more information, please follow other related articles on the PHP Chinese website!