Comment utiliser provide/inject dans Vue pour implémenter le transfert de méthode entre les composants ancêtres et les composants descendants

Vue, en tant que framework front-end populaire, fournit une variété de méthodes pour organiser et gérer les interactions entre les composants. Dans Vue, provide et inject sont deux méthodes qui peuvent être utilisées pour implémenter le transfert de méthodes entre les composants ancêtres et les composants descendants.

provide et inject sont des méthodes de communication entre les composants avancés fournies par Vue. Leur fonction est de fournir des données aux composants ancêtres, puis d'utiliser la méthode inject pour recevoir des données dans les composants descendants.

1. Définition de provide et inject

provide et inject sont de nouvelles fonctionnalités de Vue.js 2.2.0+. Ce sont des alternatives pour la communication entre les composants parents et enfants.

L'option provide peut être un objet ou une fonction qui renvoie un objet, et son rôle est de définir les données que vous fournissez. L'option inject peut être un tableau ou un objet, où le membre du tableau est une chaîne, représentant la propriété que vous devez injecter. La clé du membre objet représente le nom de la liaison locale et la valeur de la clé est la clé fournie par. son composant parent.

2. Scénarios d'utilisation de provide et inject

L'utilisation de provide et inject peut être utilisée dans les scénarios suivants :

• Communication entre des composants imbriqués à plusieurs niveaux
• Les composants ancêtres peuvent transmettre des données et des méthodes aux composants descendants ; Évitez d'utiliser vuex pour une gestion simple de l'état.
• Utilisez vuex pour gérer l'état global et résoudre le problème de la gestion de l'état entre plusieurs composants. Cependant, pour des scénarios de gestion d'état simples, il est plus simple et plus efficace d'utiliser des méthodes de communication fournies et injectées.

3. Implémentation de provide et inject

Ce qui suit est un exemple pour présenter l'implémentation de provide et inject :

Dans le composant parent App.vue, utilisez la méthode provide pour fournir la méthode setData:

1. <template>
     <div>
       <child-comp :setData="setData"></child-comp>
     </div>
   </template>
   
   <script>
   import ChildComp from './ChildComp.vue';
   
   export default {
     components: {
       ChildComp
     },
     provide() {
       return {
         setData: this.setData
       }
     },
     data() {
       return {
         text: 'Hello World'
       }
     },
     methods: {
       setData() {
         this.text = 'Vue.js is awesome';
       }
     }
   }
   </script>

Dans Dans le composant enfant ChildComp.vue, utilisez la méthode inject pour recevoir la méthode setData et appelez la méthode setData dans le composant :

2. <template>
     <div>
       <button @click="setData()">修改文本</button>
     </div>
   </template>
   
   <script>
   export default {
     inject: ['setData']
   }
   </script>

Cliquez sur le bouton dans le composant enfant et modifiez le texte dans le composant parent en appelant la méthode setData fournie par la propriété du composant parent.

3. 4. Notes sur provide et inject

Bien que l'utilisation de provide et inject soit simple et pratique, vous devez faire attention aux points suivants :

provide et inject ne répondent pas lorsque les données fournies par le composant parent. change, le composant enfant Il ne sera pas mis à jour automatiquement ;

• Vous devez faire attention au conflit de nom entre provide et inject pour éviter que les conflits de nom ne provoquent des erreurs de transfert de données
• Les attributs injectés par provide et inject dans différents ancêtres sont ; différent, vous devez donc faire attention à la source des attributs.
• 5. Résumé

Cet article explique comment utiliser provide et inject dans Vue pour implémenter le transfert de méthode entre les composants ancêtres et les composants descendants. L'utilisation de provide et d'inject peut permettre une communication simple entre les composants, éviter d'utiliser la gestion simple de l'état de vuex et améliorer l'efficacité du développement. Cependant, vous devez noter que provide et inject ne répondent pas et vous devez faire attention au conflit de nom entre provide et inject.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!