Compartilhamento de tecnologia

Explicação completa da comunicação dos componentes Vue 3: das técnicas básicas às avançadas

2024-07-12

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

introdução

O Vue 3 apresenta a API Composition, que traz nova flexibilidade e poder à comunicação de componentes.

Noções básicas de comunicação de componentes

Definição e função dos componentes

No desenvolvimento front-end, os componentes podem ser considerados unidades independentes que constroem uma interface de usuário. Ele encapsula funcionalidades e estilos específicos, pode ser reutilizado e desenvolvido e testado independentemente de outras partes. A principal função dos componentes é melhorar a reutilização, manutenção e escalabilidade do código. Ao dividir a interface em vários componentes, os desenvolvedores podem gerenciar aplicativos complexos com mais facilidade e cada componente pode ser otimizado para melhorar a eficiência geral do desenvolvimento e o desempenho do aplicativo.

Árvore de componentes e relacionamento entre componentes pai e filho

Em estruturas front-end como Vue.js, os componentes podem ser aninhados para formar uma árvore de componentes. Nesta estrutura em árvore, cada componente pode ter subcomponentes, e esses subcomponentes podem ter seus próprios subcomponentes, formando uma estrutura hierárquica. Essa estrutura deixa clara a relação entre os componentes e facilita o gerenciamento e a manutenção.

  • Relacionamento componente pai-filho : Na árvore de componentes, um componente pode criar outro componente. Nesse caso, o criador é chamado de componente pai e o componente criado é chamado de componente filho. Os componentes pais podem passar dados e métodos para componentes filhos, e os componentes filhos podem enviar informações aos componentes pais por meio de eventos. Esse relacionamento pai-filho é a base para a comunicação dos componentes.
  • Relacionamento de componente irmão : vários componentes filhos no mesmo componente pai são relacionamentos de componentes irmãos. Os componentes irmãos não podem se comunicar diretamente entre si e a comunicação entre eles geralmente precisa ser retransmitida por meio do componente pai.
  • Relacionamentos de componentes ancestrais e descendentes : Na árvore de componentes, o componente pai do componente pai é o componente ancestral e o componente filho do componente filho é o componente descendente. Esse relacionamento é especialmente importante ao lidar com componentes profundamente aninhados.

Os conceitos de árvores de componentes e relacionamentos entre componentes pai-filho são cruciais para a compreensão da comunicação entre componentes. Dominar esses conhecimentos básicos pode ajudar os desenvolvedores a projetar e implementar mecanismos de comunicação entre componentes de forma mais eficaz.

Comunicação do componente pai-filho (Vue 3)

Pai passa dados para filho (Props)

O que são adereços
Props são um mecanismo para os componentes pais passarem dados para os componentes filhos.No Vue 3, usedefinePropsA API é usada para declarar o recebimento de adereços, o que mantém o fluxo unidirecional de dados e garante a independência e reutilização dos componentes.

Como passar adereços no componente pai
No modelo do componente pai, usev-bindou abreviatura:Para vincular dados:

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

aqui,:my-propIndica que este é um suporte vinculado dinamicamente,parentDataOs dados estão definidos no componente pai。

Como receber adereços no componente filho
No componente filho, usedefinePropsPara declarar os adereços recebidos:

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

existir<script setup>No açúcar sintático,definePropsIrá expor automaticamente os adereços como propriedades responsivas do componente。

Criança passa evento para pai (Emit)

o que é emitir
Emit é um mecanismo para componentes filhos enviarem mensagens aos componentes pais.No Vue 3, usedefineEmitsAPI para declarar eventos que podem ser emitidos e usaremitfunção para acionar eventos.

Como disparar evento no componente filho
No método do componente filho, use defineEmits para declarar eventos que podem ser emitidos e usar emit acionar:

  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>

defineEmitsé usado para declarar eventos que um componente pode emitir, enquantoemitFunções são usadas para acionar esses eventos.

Como ouvir eventos de componentes filhos no componente pai
No modelo do componente pai,usarv-onou abreviatura@ Para escutar eventos emitidos por componentes filhos:

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

aqui,@my-eventIndica que o subcomponente de escuta emitemy-eventevento,handleEventÉ um método definido no componente pai. Quando o evento for acionado, este método será chamado.

Exemplo abrangente

Suponha que haja um componente paiParentComponente um subcomponenteChildComponent, o componente pai precisa passar dados para o componente filho, e o componente filho precisa notificar o componente pai após uma operação específica.

componente paiParentComponent.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>

SubmontagemChildComponent.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>

Neste exemplo, o componente pai passa:my-propPasse dados para componentes filhos e passe@child-event Ouça eventos emitidos por componentes filhos.componente filho passadefinePropsRecebe o conteúdo passado pelo componente paimyPrope use-o no evento de clique do botãoemitEnvie dados para o componente pai.

Usando Pinia (biblioteca de gerenciamento de estado para Vue 3)

Vantagens e características do Pinia

Pinia é a biblioteca de gerenciamento de estado oficialmente recomendada para Vue 3. Ela fornece uma maneira baseada em componentes de gerenciar o estado do aplicativo. Aqui estão alguns dos principais benefícios e recursos do Pinia:

  • API de componentes: Pinia adota API baseada em componentes, tornando mais natural a separação entre gerenciamento de estado e lógica de componentes.
  • Suporte TypeScript: Pinia considerou o suporte ao TypeScript desde o início, permitindo melhor inferência de tipos e suporte ao editor ao desenvolver com TypeScript.
  • Modular: Pinia permite dividir o estado em várias lojas, e cada loja pode gerenciar independentemente seu próprio estado e lógica.
  • Compatível com API composta: Pinia está perfeitamente integrado com a API Composition do Vue 3, tornando mais natural a separação entre gerenciamento de estado e lógica de componentes.
  • Depuração de viagem no tempo: Pinia fornece recursos de depuração de viagens no tempo, permitindo que os desenvolvedores retrocedam e inspecionem facilmente as mudanças de estado.
Como configurar e usar o Pinia

Para começar a usar o Pinia, primeiro você precisa instalar o Pinia:

npm install pinia

Ou use Fio:

yarn add pinia

Em seguida, configure o Pinia em seu aplicativo Vue:

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

Crie uma loja:

  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. });

Use store no 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>
Integração Pinia com componentes

A integração do Pinia com componentes é muito simples, principalmente atravésdefineStore função para criar uma loja. Nos componentes, você pode usar diretamente o estado e os métodos da loja:

  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>

No exemplo acima, acessamos diretamente no templatecountpara exibir o valor do contador e chamá-lo no evento de clique do botãoincrementMétodo para incrementar o valor do contador.

Método de comunicação exclusivo Vue 3

Fornecer/Injetar

Uso básico de Fornecer/Injetar
Na versão 3,provideeinjectÉ um método de comunicação entre componentes pai e filho que permite que um componente ancestral injete uma dependência em todos os seus componentes descendentes, independentemente da profundidade da hierarquia de componentes.

  • fornecer dados: Uso do componente ancestralprovideFunções fornecem dados.
  • Injetar dados: usado por componentes descendentesinjectA função injeta dados.

Cenários aplicáveis ​​para fornecer/injetar
provideeinjectAplicável aos seguintes cenários:

  • Quando você deseja evitar passar por múltiplas camadaspropsao passar dados.
  • Quando você deseja que vários componentes na árvore de componentes compartilhem dados.

Código de amostra：

  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. }
teleporte

O conceito e uso do Teleporte
TeleportÉ um novo componente integrado no Vue 3 que permite "transmitir" uma parte do modelo dentro de um componente para qualquer outro local no DOM.

Como usar o Teleporte para comunicação de componentes
Teleport Não é usado para comunicação entre componentes, mas para controlar a posição de renderização dos componentes.mas você pode usarTeleportUm método especial de comunicação é obtido renderizando partes de um componente no DOM do componente pai.

Código de amostra：

  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 de composição

Introdução à API de composição
O Vue 3 apresenta a API Composition, que fornece uma nova maneira de organizar e reutilizar lógica.passarsetupAs funções permitem que os desenvolvedores controlem com mais flexibilidade o estado de resposta e o ciclo de vida dos componentes.

Use ref e reativo para comunicação entre componentes
refereactiveÉ uma ferramenta da API Composition para criação de dados responsivos.

  • refReferências reativas para criação de tipos de dados básicos.
  • reactiveReferência reativa para criação de tipos de objetos.

Usando fornecer e injetar na API de composição
Na API de composição,provideeinjectpermitidosetupUsado em funções para obter comunicação entre componentes.

Código de amostra：

  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. }

Através desses métodos de comunicação exclusivos do Vue 3, os desenvolvedores podem organizar a comunicação entre os componentes com mais flexibilidade e melhorar a capacidade de manutenção e reutilização do código.

Resumir

O Vue 3 apresenta a API Composition, que traz nova flexibilidade e recursos poderosos para a comunicação de componentes. A comunicação de componentes é a chave para a construção de interfaces de usuário complexas no desenvolvimento front-end. Ela envolve transferência de dados e acionamento de eventos entre componentes pai e filho, componentes irmãos e componentes ancestrais e descendentes. O Vue 3 fornece uma variedade de métodos de comunicação, incluindo adereços e emissões tradicionais, bem como a nova API de fornecimento/injeção, teletransporte e composição.

Informações relacionadas recomendadas

A criação não é fácil. Se este artigo te ajudar, você pode me dar um like?

Perfil pessoal

Ele se dedica à pesquisa de tecnologia há mais de 30 anos e é proficiente em diversas linguagens como java, linux, javascript, php, css, etc. estação de documentação do desenvolvedor para compartilhar alguns problemas no desenvolvimento de tecnologia para referência futura.

minhas informações de contato

Correspondência