Introdução aos componentes do Vue

Introdução

Ao desenvolver um aplicativo grande, é sempre uma boa ideia dividi-lo em componentes menores para tornar o código mais fácil de ler, estruturar e manter. A maioria dos iniciantes em Vue entende o que os componentes são, pelo menos conceitualmente, mas eles podem não entender o que podem ou não fazer completamente.

Neste guia, veremos o que é um componente no Vue, como ele funciona, como passar dados e eventos por ele e muito mais.

O que é um componente Vue?

Componentes são instâncias reutilizáveis ​​de elementos Vue que incluem templates, estilos e elementos JavaScript. Cada componente é “sua própria coisa”, semelhante a como cada elemento HTML é “sua própria coisa”, e os componentes Vue e os elementos HTML nos permitem usá-los como blocos de construção para páginas da web.

Você pode pensar nos componentes do Vue como elementos HTML imbuídos de JavaScript, que você mesmo pode definir e manipular.

Um aplicativo Vue típico é composto de vários componentes que podem ser reutilizados quantas vezes forem necessárias.

Por exemplo, um site comum tem seções que aparecem em todas as páginas – barra de navegação, cabeçalho, rodapé e assim por diante. Portanto, é considerado uma boa prática tornar cada um deles um componente separado. Dessa forma, estamos criando um código bem estruturado, legível, reutilizável e de fácil manutenção:

Como criar um componente Vue

Existem duas maneiras básicas de criar um componente Vue, dependendo de como nosso projeto foi criado – com ou sem uma configuração de compilação. No primeiro caso, cada componente é armazenado em um arquivo separado. No segundo caso, pode haver vários componentes em um único arquivo.

Criar componentes Vue com uma configuração de compilação

A maioria dos projetos são criados usando o configuração de construção, que nos permite criar componentes de arquivo único (SFCs) – arquivos de componentes dedicados com o .vue extensão. Isso nos permite encapsular o modelo, a lógica e o estilo de um componente Vue em um único arquivo:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Criar componentes Vue sem uma configuração de compilação

Se você, por qualquer motivo, não puder usar um gerenciador de pacotes como npm para instalar o Vue em sua máquina, você ainda pode usar o Vue em seu aplicativo. Uma alternativa para a construção do Vue usando npm é instalar o Vue através de um CDN (rede de entrega de conteúdo) diretamente em seu aplicativo. Vamos examinar rapidamente essa maneira de criar um componente Vue.

A instalação do Vue sem compilação nos permitirá usar funcionalidades específicas do Vue, como fazemos com o JavaScript simples. A sintaxe é um pouco semelhante ao que vimos nos SFCs usuais:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

Neste guia, usaremos o Sintaxe SFC, pois esse é o método mais usado para criar componentes.

Como registrar componentes no Vue

Até agora, vimos como criar componentes no Vue. O próximo passo será usar esses componentes dentro de outro componente (hierarquia pai-filho).

Para fazer isso, devemos primeiro registrar os componentes que queremos usar. Este registro envolve a importação e registro de componentes. Existem duas opções para fazê-lo - global e registro local.

Componentes Vue – Registro Global

Os componentes registrados globalmente, como o nome indica, estão disponíveis globalmente, o que significa que podem ser usados ​​em qualquer componente de nosso aplicativo sem que precisemos importá-los novamente. Isso é feito registrando um componente usando o app.component() método:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

Em uma situação em que temos muitos componentes, podemos cadeia eles assim:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Após registrarmos nossos componentes, podemos utilizá-los no template de qualquer componente dentro desta aplicação utilizando a seguinte sintaxe:

<ChildComponent/>
<ProfileComponent/>

Componentes Vue – Registro Local

Usaremos o registro local na maioria dos casos porque ele nos permite avaliar a disponibilidade de nossos componentes registrados. Importar esses componentes e adicioná-los ao components opção faz isso:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

Ao nomear componentes, use CamelCase para deixar claro que este é um componente Vue em vez de um elemento HTML nativo em modelos. Isso também facilita a importação e o registro de componentes em JavaScript.

Como passar dados por componentes Vue

Um dos benefícios da criação de componentes é a capacidade de reutilizar o código tornando-o modular.

Suponha que estamos criando um componente de perfil de usuário que precisa receber os dados de cada aluno da página de perfil; neste caso, devemos passar esses dados do componente de perfil (componente pai) para o componente de perfil de usuário (componente filho) e usaremos props.

Adereços

Props são atributos personalizados que podemos registrar em um componente, para que possamos passar dados do componente pai para o componente filho usando o props opção dentro da tag de script:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

Caça-níqueis

Vue slots são espaços reservados que nos permitem passar qualquer tipo de conteúdo de um componente para outro. Isso dá um controle mais centralizado do que as props porque, ao contrário das props, o componente pai controla o conteúdo dentro do componente filho. Por exemplo, poderíamos fazer o seguinte botão:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Então podemos usar este componente em qualquer lugar que quisermos e dar a ele o conteúdo que desejamos. A falha em fornecer um conteúdo significa que ele fará uso do valor padrão que fornecemos (Clique em mim):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Como emitir eventos de componentes Vue

Aprendemos que as props são usadas para enviar dados do componente pai para o componente filho. Mas podemos nos perguntar se havia uma maneira de enviar algo do componente filho para o componente pai. E a resposta é sim, os eventos também podem ser enviados do componente filho para o componente pai.

Suponha que temos um componente pai (App.vue) que contém um único componente filho (MyBlogPost.vue). Além disso, o componente filho contém um botão que deve alterar o título.

Suponha que queremos alterar o título da nossa página quando um botão é clicado, para que uma função seja acionada:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

E o componente filho ficará assim:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Conclusão

Neste guia, aprendemos como trabalhar com componentes em Vue, o que é essencial para qualquer um que use Vue. Também aprendemos como enviar e receber dados, bem como emitir eventos.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://stackabuse.com/introduction-to-vue-components/