Introduzione ai componenti Vue

Introduzione

Quando si sviluppa un'applicazione di grandi dimensioni, è sempre una buona idea suddividerla in componenti più piccoli per rendere il codice più facile da leggere, strutturare e mantenere. La maggior parte dei principianti di Vue capisce quali sono i componenti almeno concettualmente, ma potrebbero non capire cosa possono e non possono fare completamente.

In questa guida, daremo un'occhiata a cos'è un componente in Vue, come funziona, come passare dati ed eventi attraverso di essi e molto altro.

Che cos'è un componente Vue?

Componenti sono istanze riutilizzabili di elementi Vue che includono modelli, stili ed elementi JavaScript. Ogni componente è "la sua cosa", simile a come ogni elemento HTML è "la sua cosa", e sia i componenti Vue che gli elementi HTML ci consentono di usarli come elementi costitutivi per le pagine web.

Puoi pensare ai componenti Vue come elementi HTML intrisi di JavaScript, che puoi definire e manipolare da solo.

Una tipica applicazione Vue è costituita da numerosi componenti che possono essere riutilizzati tutte le volte che è necessario.

Ad esempio, un normale sito Web ha sezioni che appaiono su tutte le pagine: barra di navigazione, intestazione, piè di pagina e così via. Pertanto, è considerata una buona pratica rendere ciascuno di essi un componente separato. In questo modo, creiamo codice ben strutturato, leggibile, riutilizzabile e facilmente gestibile:

Come creare un componente Vue

Esistono due modi di base per creare un componente Vue, a seconda di come è stato creato il nostro progetto: con o senza una configurazione di costruzione. Nel primo caso, ogni componente è memorizzato in un file separato. Nel secondo caso, possono esserci più componenti in un singolo file.

Crea componenti Vue con una configurazione di build

La maggior parte dei progetti viene creata utilizzando il file configurazione di configurazione, che ci consente di creare componenti a file singolo (SFC) – file di componenti dedicati con l'estensione .vue estensione. Questo ci consente di incapsulare il modello, la logica e lo stile di un componente Vue in un singolo file:

<!-- 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>

Crea componenti Vue senza una configurazione di build

Se, per qualsiasi motivo, non puoi utilizzare un gestore di pacchetti come npm per installare Vue sulla tua macchina, puoi comunque utilizzare Vue nella tua app. Un'alternativa all'edificio che utilizza Vue npm è installare Vue tramite a Content Delivery Network (CDN) direttamente nella tua app. Esaminiamo rapidamente questo modo di creare un componente Vue.

L'installazione di Vue senza build ci consentirà di utilizzare le funzionalità specifiche di Vue come facciamo con il semplice JavaScript. La sintassi è in qualche modo simile a quella che abbiamo visto nei soliti SFC:

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

In questa guida, useremo il Sintassi SFC, poiché questo è il metodo più comunemente utilizzato per creare componenti.

Come registrare i componenti in Vue

Finora abbiamo visto come creare componenti in Vue. Il prossimo passo sarà utilizzare questi componenti all'interno di un altro componente (gerarchia genitore-figlio).

Per fare ciò, dobbiamo prima registrare i componenti che vogliamo usare. Questa registrazione comporta l'importazione e quindi la registrazione dei componenti. Ci sono due opzioni per farlo: globale ed registrazione locale.

Componenti Vue – Registrazione globale

I componenti registrati a livello globale, come suggerisce il nome, sono disponibili a livello globale, il che significa che possono essere utilizzati in qualsiasi componente della nostra applicazione senza che sia necessario importarli nuovamente. Ciò si ottiene registrando un componente utilizzando il file app.component() Metodo:

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

In una situazione in cui abbiamo molti componenti, possiamo catena loro in questo modo:

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

Dopo aver registrato i nostri componenti, possiamo utilizzarli nel modello di qualsiasi componente all'interno di questa applicazione utilizzando la seguente sintassi:

<ChildComponent/>
<ProfileComponent/>

Componenti Vue – Registrazione locale

Nella maggior parte dei casi utilizzeremo la registrazione locale perché ci consente di valutare la disponibilità dei nostri componenti registrati. Importare questi componenti e quindi aggiungerli al file components l'opzione realizza questo:

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

Quando si nominano i componenti, utilizzare Camel Case per chiarire che si tratta di un componente Vue piuttosto che di un elemento HTML nativo nei modelli. Ciò semplifica anche l'importazione e la registrazione di componenti in JavaScript.

Come passare i dati attraverso i componenti di Vue

Uno dei vantaggi della creazione di componenti è la possibilità di riutilizzare il codice rendendolo modulare.

Supponiamo di creare un componente del profilo di un utente che deve ricevere i dati di ogni studente dalla pagina del profilo; in questo caso, dobbiamo trasferire questi dati dal componente del profilo (componente genitore) al componente del profilo utente (componente figlio) e useremo gli oggetti di scena.

Puntelli

Gli oggetti di scena sono attributi personalizzati che possiamo registrare su un componente, quindi possiamo passare i dati dal componente genitore al componente figlio usando il props opzione all'interno del tag script:

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

Slot machine

Gli slot Vue sono spazi riservati che ci consentono di passare qualsiasi tipo di contenuto da un componente all'altro. Ciò offre un controllo più centralizzato rispetto agli oggetti di scena perché, a differenza degli oggetti di scena, il componente genitore controlla il contenuto all'interno del componente figlio. Ad esempio, potremmo creare il seguente pulsante:

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

Quindi possiamo usare questo componente ovunque vogliamo e dargli il contenuto che desideriamo. La mancata assegnazione di un contenuto significa che utilizzerà il valore predefinito che gli abbiamo assegnato (Fai clic su di me):

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

Come emettere eventi dai componenti Vue

Abbiamo appreso che gli oggetti di scena vengono utilizzati per inviare dati dal componente genitore al componente figlio. Ma potremmo chiederci se ci fosse un modo per inviare qualcosa dal componente figlio al componente genitore. E la risposta è sì, gli eventi possono essere inviati anche dal componente figlio al componente padre.

Supponiamo di avere un componente genitore (App.vue) che contiene un singolo componente figlio (MyBlogPost.vue). Inoltre, il componente figlio contiene un pulsante che dovrebbe cambiare il titolo.

Supponiamo di voler cambiare il titolo della nostra pagina quando si fa clic su un pulsante, in modo che venga attivata una funzione:

<!-- 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 il componente figlio sarà simile a questo:

<!-- 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>

Conclusione

In questa guida, abbiamo imparato come lavorare con i componenti in Vue, che è essenziale per chiunque utilizzi Vue. Abbiamo anche imparato come inviare e ricevere dati, nonché come emettere eventi.

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://stackabuse.com/introduction-to-vue-components/