Condivisione della tecnologia

Spiegazione completa della comunicazione dei componenti Vue 3: dalle tecniche di base a quelle avanzate

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

introduzione

Vue 3 introduce l'API Composition, che apporta nuova flessibilità e potenza alla comunicazione dei componenti.

Nozioni di base sulla comunicazione dei componenti

Definizione e funzione dei componenti

Nello sviluppo front-end, i componenti possono essere considerati come unità indipendenti che costruiscono un'interfaccia utente. Incapsula funzionalità e stili specifici, può essere riutilizzato e sviluppato e testato indipendentemente da altre parti. La funzione principale dei componenti è migliorare la riusabilità, la manutenibilità e la scalabilità del codice. Suddividendo l'interfaccia in più componenti, gli sviluppatori possono gestire più facilmente applicazioni complesse e ciascun componente può essere ottimizzato per migliorare l'efficienza complessiva dello sviluppo e le prestazioni delle applicazioni.

Albero dei componenti e relazione componente genitore-figlio

Nei framework front-end come Vue.js, i componenti possono essere annidati per formare un albero dei componenti. In questa struttura ad albero, ogni componente può avere sottocomponenti e questi sottocomponenti possono avere i propri sottocomponenti, formando una struttura gerarchica. Questa struttura rende chiara la relazione tra i componenti e facilita la gestione e la manutenzione.

  • Relazione componente genitore-figlio : Nell'albero dei componenti, un componente può creare un altro componente. In questo caso, il creatore è chiamato componente principale e il componente creato è chiamato componente figlio. I componenti principali possono passare dati e metodi ai componenti secondari e i componenti secondari possono inviare informazioni ai componenti principali tramite eventi. Questa relazione genitore-figlio è la base per la comunicazione dei componenti.
  • Relazione componente tra fratelli : più componenti secondari sotto lo stesso componente principale sono relazioni tra componenti di pari livello. I componenti fratelli non possono comunicare direttamente tra loro e la comunicazione tra loro solitamente deve essere inoltrata attraverso il componente genitore.
  • Relazioni tra componenti antenati e discendenti : Nell'albero dei componenti, il componente genitore del componente genitore è il componente antenato e il componente figlio del componente figlio è il componente discendente. Questa relazione è particolarmente importante quando si ha a che fare con componenti profondamente annidati.

I concetti di alberi dei componenti e di relazioni tra i componenti padre-figlio sono cruciali per comprendere la comunicazione dei componenti. Padroneggiare queste conoscenze di base può aiutare gli sviluppatori a progettare e implementare meccanismi di comunicazione tra i componenti in modo più efficace.

Comunicazione componente genitore-figlio (Vue 3)

Il genitore passa i dati al figlio (oggetti di scena)

Cosa sono gli oggetti di scena
Gli oggetti di scena sono un meccanismo che consente ai componenti principali di passare dati ai componenti secondari.In Vue 3, utilizzaredefinePropsL'API viene utilizzata per dichiarare le proprietà di ricezione, che mantengono il flusso di dati unidirezionale e garantiscono l'indipendenza e la riusabilità dei componenti.

Come passare gli oggetti di scena nel componente genitore
Nel modello del componente principale, utilizzarev-bindo abbreviazione:Per associare i dati:

  1. <template>
  2.    <ChildComponent :my-prop="parentData" />
  3. </template>

Qui,:my-propIndica che si tratta di un oggetto di scena legato dinamicamente,parentDataI dati sono definiti nel componente padre。

Come ricevere oggetti di scena nel componente figlio
Nel componente figlio, utilizzaredefinePropsPer dichiarare gli oggetti di scena ricevuti:

  1. <script setup>
  2. import { defineProps } from 'vue';
  3.  
  4. const props = defineProps({
  5.    myProp: String
  6. });
  7. </script>

esistere<script setup>Nello zucchero sintattico,definePropsEspone automaticamente gli oggetti di scena come proprietà reattive del componente。

Il bambino passa l'evento al genitore (Emit)

cosa viene emesso
Emit è un meccanismo che consente ai componenti figlio di inviare messaggi ai componenti padre.In Vue 3, utilizzaredefineEmitsAPI per dichiarare eventi che possono essere emessi e utilizzatiemitfunzione per attivare eventi.

Come attivare l'evento nel componente figlio
Nel metodo del componente figlio, utilizzare defineEmits per dichiarare eventi che possono essere emessi e utilizzare emit per innescare:

  1. <script setup>
  2. import { defineEmits } from 'vue';
  3.  
  4. const emit = defineEmits(['my-event']);
  5.  
  6. function triggerEvent() {
  7.    emit('my-event', dataToPass);
  8. }
  9. </script>

defineEmitsviene utilizzato per dichiarare eventi che un componente può emettere, mentreemitLe funzioni vengono utilizzate per attivare questi eventi.

Come ascoltare gli eventi del componente figlio nel componente genitore
Nel modello del componente principale,utilizzov-ono abbreviazione@ Per ascoltare gli eventi emessi dai componenti figlio:

  1. <template>
  2.    <ChildComponent @my-event="handleEvent" />
  3. //或者<ChildComponent v-on:my-event="handleEvent" />
  4. </template>

Qui,@my-eventIndica che il sottocomponente in ascolto emettemy-eventevento,handleEventÈ un metodo definito nel componente genitore Quando l'evento viene attivato, questo metodo verrà chiamato.

Esempio completo

Supponiamo che ci sia un componente genitoreParentComponente un sottocomponenteChildComponent, il componente principale deve passare i dati al componente secondario e il componente secondario deve inviare una notifica al componente principale dopo un'operazione specifica.

componente genitoreParentComponent.vue

  1. <template>
  2.    <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
  3. </template>
  4.  
  5. <script setup>
  6. import { ref } from 'vue';
  7. import ChildComponent from './ChildComponent.vue';
  8.  
  9. const parentData = ref('initial data');
  10. const handleChildEvent = (data) => {
  11.    console.log('Received data from child:', data);
  12. };
  13. </script>

SottoinsiemeChildComponent.vue

  1. <template>
  2.    <button @click="sendDataToParent">Send Data to Parent</button>
  3. </template>
  4.  
  5. <script setup>
  6. import { defineProps, defineEmits } from 'vue';
  7.  
  8. const props = defineProps({
  9.    myProp: String
  10. });
  11.  
  12. const emit = defineEmits(['child-event']);
  13.  
  14. function sendDataToParent() {
  15.    emit('child-event', props.myProp);
  16. }
  17. </script>

In questo esempio, il componente principale passa:my-propPassa i dati ai componenti figlio e passa@child-event Ascolta gli eventi emessi dai componenti figlio.il componente figlio passadefinePropsRiceve il contenuto passato dal componente principalemyPrope utilizzarlo nell'evento clic sul pulsanteemitInvia i dati al componente principale.

Utilizzando Pinia (libreria di gestione dello stato per Vue 3)

I vantaggi e le caratteristiche di Pinia

Pinia è la libreria di gestione dello stato ufficialmente consigliata per Vue 3. Fornisce un modo basato su componenti per gestire lo stato dell'applicazione. Ecco alcuni dei principali vantaggi e caratteristiche di Pinia:

  • API del componente: Pinia adotta un'API basata su componenti, rendendo più naturale la separazione tra la gestione dello stato e la logica dei componenti.
  • Supporto dattiloscritto: Pinia ha considerato il supporto di TypeScript fin dall'inizio, consentendo una migliore inferenza di tipo e supporto dell'editor durante lo sviluppo con TypeScript.
  • Modulare: Pinia consente di suddividere lo stato in più negozi e ogni negozio può gestire in modo indipendente il proprio stato e la propria logica.
  • Compatibile con API composita: Pinia si integra perfettamente con la Composition API di Vue 3, rendendo più naturale la separazione tra gestione degli stati e logica dei componenti.
  • Debug del viaggio nel tempo: Pinia fornisce funzionalità di debug del viaggio nel tempo, consentendo agli sviluppatori di tornare facilmente indietro e ispezionare i cambiamenti di stato.
Come configurare e utilizzare Pinia

Per iniziare a utilizzare Pinia, devi prima installare Pinia:

npm install pinia

Oppure usa il filato:

yarn add pinia

Quindi, configura Pinia nella tua applicazione Vue:

  1. import { createPinia } from 'pinia';
  2.  
  3. const pinia = createPinia();
  4. app.use(pinia);

Crea un negozio:

  1. import { defineStore } from 'pinia';
  2.  
  3. export const useCounterStore = defineStore('counter', () => {
  4.     const count = ref(0);
  5.  
  6.     function increment() {
  7.         count.value++;
  8.     }
  9.  
  10.     return { count, increment };
  11. });

Utilizza il negozio nel componente:

  1. <script setup>
  2. import { useCounterStore } from '@/stores/counter';
  3.  
  4. const counterStore = useCounterStore();
  5. </script>
  6.  
  7. <template>
  8.     <div>
  9.         <p>Count: {{ counterStore.count }}</p>
  10.         <button @click="counterStore.increment">Increment</button>
  11.     </div>
  12. </template>
Integrazione Pinia con i componenti

L'integrazione di Pinia con i componenti è molto semplice, principalmente tramitedefineStore funzione per creare un negozio. Nei componenti è possibile utilizzare direttamente lo stato e i metodi nello store:

  1. <template>
  2.     <div>
  3.         <p>Count: {{ count }}</p>
  4.         <button @click="increment">Increment</button>
  5.     </div>
  6. </template>
  7.  
  8. <script setup>
  9. import { useCounterStore } from '@/stores/counter';
  10.  
  11.  
  12. const counterStore = useCounterStore();
  13. const { count, increment } = storeToRefs(counterStore);
  14. //如果这里不使用storeToRefs会丢失响应式特性
  15. </script>

Nell'esempio sopra, accediamo direttamente al templatecountper visualizzare il valore del contatore e richiamarlo nell'evento clic sul pulsanteincrementMetodo per incrementare il valore del contatore.

Metodo di comunicazione unico Vue 3

Fornire/Iniettare

Utilizzo di base di Provide/Inject
In Vue3,provideEinjectÈ un metodo di comunicazione tra componenti genitore e figlio che consente a un componente antenato di iniettare una dipendenza in tutti i suoi componenti discendenti, indipendentemente da quanto profonda sia la gerarchia dei componenti.

  • fornire dati: Utilizzo del componente predecessoreprovideLe funzioni forniscono dati.
  • Iniettare dati: utilizzato dai componenti discendentiinjectLa funzione inserisce i dati.

Scenari applicabili per Fornire/Iniettare
provideEinjectApplicabile ai seguenti scenari:

  • Quando desideri evitare di passare attraverso più livellipropsquando si passano i dati.
  • Quando si desidera che più componenti nell'albero dei componenti condividano i dati.

Codice d'esempio：

  1. // 祖先组件
  2. export default {
  3.   setup() {
  4.     const message = 'Hello from Ancestor!';
  5.     provide('message', message);
  6.   }
  7. }
  8.  
  9. // 子孙组件
  10. export default {
  11.   setup() {
  12.     const message = inject('message');
  13.     return { message };
  14.   }
  15. }
Teletrasporto

Il concetto e l'uso del teletrasporto
TeleportSi tratta di un nuovo componente integrato aggiunto in Vue 3, che consente di "trasmettere" una parte del modello all'interno di un componente in qualsiasi altra posizione nel DOM.

Come utilizzare Teletrasporto per la comunicazione dei componenti
Teleport Non viene utilizzato per la comunicazione tra i componenti, ma per controllare la posizione di rendering dei componenti.ma puoi usareTeleportUno speciale metodo di comunicazione si ottiene eseguendo il rendering di parti di un componente nel DOM del componente principale.

Codice d'esempio：

  1. <!-- 父组件 -->
  2. <template>
  3.   <div>
  4.     <Teleport to="body">
  5.       <ChildComponent />
  6.     </Teleport>
  7.   </div>
  8. </template>
  9.  
  10. <!-- 子组件 -->
  11. <template>
  12.   <div>Some content</div>
  13. </template>
API di composizione

Introduzione all'API di composizione
Vue 3 introduce l'API Composition, che fornisce un nuovo modo di organizzare e riutilizzare la logica.passaggiosetupLe funzioni consentono agli sviluppatori di controllare in modo più flessibile lo stato di risposta e il ciclo di vita dei componenti.

Utilizzare ref e reactive per la comunicazione tra componenti
refEreactiveÈ uno strumento nell'API di composizione per la creazione di dati reattivi.

  • refRiferimenti reattivi per la creazione di tipi di dati di base.
  • reactiveRiferimento reattivo per la creazione di tipi di oggetto.

Utilizzo di supply e inject nell'API Composition
Nell'API di composizione,provideEinjectammissibilesetupUtilizzato nelle funzioni per ottenere la comunicazione tra componenti.

Codice d'esempio：

  1. // 祖先组件
  2. import { provide } from 'vue';
  3.  
  4. export default {
  5.   setup() {
  6.     const message = ref('Hello from Ancestor!');
  7.     provide('message', message);
  8.   }
  9. }
  10.  
  11. // 子孙组件
  12. import { inject } from 'vue';
  13.  
  14. export default {
  15.   setup() {
  16.     const message = inject('message');
  17.     return { message };
  18.   }
  19. }

Attraverso questi metodi di comunicazione unici di Vue 3, gli sviluppatori possono organizzare in modo più flessibile la comunicazione tra i componenti e migliorare la manutenibilità e la riusabilità del codice.

Riassumere

Vue 3 introduce l'API Composition, che apporta nuova flessibilità e potenti funzionalità alla comunicazione dei componenti. La comunicazione dei componenti è la chiave per creare interfacce utente complesse nello sviluppo front-end. Implica il trasferimento di dati e l'attivazione di eventi tra componenti padre e figlio, componenti di pari livello e componenti antenato e discendente. Vue 3 offre una varietà di metodi di comunicazione, inclusi oggetti di scena tradizionali ed emissione, nonché le nuove API Provide/Inject, Teleport e Composition.

Informazioni correlate consigliate

La creazione non è facile. Se questo articolo ti è d'aiuto, puoi darmi un mi piace?

Profilo personale

Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro

le mie informazioni di contatto

Posta