Introdução aos componentes do Vue

• 5 minutos

Por definição, um componente é "uma parte ou elemento de um todo maior". Quando você pensar em criar um aplicativo, normalmente trabalhará com partes menores e as combinará em um todo maior: seu aplicativo. O Vue permite que você crie componentes que pode usar para criar um aplicativo completo.

Componentes do Vue

Embora você possa criar componentes usando arquivos JavaScript, o método mais comum é criar componentes de arquivo único usando a sintaxe do Vue dentro de um arquivo .vue. Os componentes de arquivo único permitem uma estrutura mais limpa e uma configuração mais independente. Eles permitem até mesmo que você use vários pré-processadores, como o Pug ou o Stylus.

Ao criar componentes, você está basicamente criando marcas que podem ser usadas no aplicativo de maneira semelhante a marcas HTML normais. Essa forma de marcas semânticas esclarece o que está sendo exibido em uma página. Uma marca como <booking-form></booking-form> provavelmente exibiria um formulário para criar uma reserva e <booking-list></booking-list> provavelmente exibiria uma lista de reservas.

Estrutura de componentes do Vue

Os componentes do Vue contêm três seções principais: style, script e template.

estilo

A seção style pode conter qualquer CSS válido ou a sintaxe de qualquer pré-processador que você estiver usando.

Você também pode definir o escopo do CSS para esse componente específico usando o atributo scoped. Os estilos serão aplicados somente a esse componente, para que você possa criar classes e outras configurações sem se preocupar com a modificação acidental de outras partes da página.

<style>
.demo {
    font-family: Verdana
}
</style>

Script

A seção script armazena o script usado para o componente. Assim como ocorre com um componente JavaScript do Vue, você pode exportar as várias propriedades e métodos do Vue, como data(), methods e components.

<script>
export default {
    data() {
        return {
            product: {
                name: 'Cruise to the moon',
                description: 'A cool cruise to the moon!'
            }
        }
    }
}
</script>

template

A seção template hospeda o modelo HTML que você deseja usar para exibir informações e permitir que o usuário interaja com os dados. Quando você usa um componente baseado em JavaScript, template normalmente está dentro do arquivo .html ou é um literal de cadeia de caracteres em um arquivo JavaScript.

A sintaxe HTML usada em template é a mesma usada com componentes baseados em JavaScript, incluindo o uso de handlebars ({{}}) para exibir dados.

<template>
  <div id="product">
    <div>{{ product.name }}</div>
    <div>{{ product.description }}</div>
  </div>
</template>

Carregamento e componentes

Conforme realçado anteriormente, os componentes de arquivo único são salvos com uma extensão .vue. Você pode carregar esses componentes de maneira semelhante à de outros módulos usando a instrução import. Você pode registrá-los usando a propriedade components. Depois que são registrados, os componentes ficam disponíveis para uso como uma marca dentro de template.

<template>
<product-display></product-display>
</template>
<script>
import ProductDisplay from './ProductDisplay.vue'
export default {
    components: {
        ProductDisplay
    }
}

No código anterior, o componente ProductDisplay é importado e adicionado à propriedade components. Em seguida, quando ProductDisplay é usado no modelo, o compilador do Vue sabe discernir que esse componente é algo que ele precisa analisar, e não um elemento HTML normal.

Separação de interesses

Colocar HTML, CSS e JavaScript em um arquivo pode parecer ser distante da melhor prática de criar arquivos separados para cada tipo. Na prática, alternar entre esses arquivos pode causar lentidão no desenvolvimento devido às interdependências entre eles. Há também uma carga cognitiva associada a ter que alternar entre arquivos.

Componentes de arquivo único permitem que você crie arquivos separados para suas seções script e style usando o atributo src.

<template>
    <div>Hello, world</div>
</template>
<script src="./hello.js"></script>
<style src="./style.css"></style>