Conseils pour utiliser provide et inject pour transmettre des données entre les niveaux dans Vue

Conseils d'utilisation de provide et inject pour transférer des données entre niveaux dans Vue

Dans le développement de Vue, le transfert de données entre composants est une exigence très courante. Normalement, nous pouvons transférer des données entre les composants via des méthodes d'accessoires et d'émission, mais lorsqu'il existe plusieurs niveaux d'imbrication entre les composants, cette méthode devient plus lourde et il est très facile de provoquer un couplage de code. À l'heure actuelle, fournir et injecter dans Vue peut s'avérer utile.

provide et inject sont de nouvelles fonctionnalités introduites dans Vue version 2.2.0. Ces deux API peuvent facilement implémenter l'opération de transmission de données couche par couche. Dans l'exemple suivant, nous utiliserons un exemple avec plusieurs niveaux de composants imbriqués pour montrer comment utiliser provide et inject pour réaliser un transfert de données entre niveaux.

Supposons que nous ayons les composants imbriqués multicouches suivants :

<template>
  <div>
    <child1></child1>
  </div>
</template>

<script>
import child1 from './child1.vue';
export default {
  components: {
    child1
  }
};
</script>

<template>
  <div>
    <child2></child2>
  </div>
</template>

<script>
import child2 from './child2.vue';
export default {
  components: {
    child2
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
    <grandchild></grandchild>
  </div>
</template>

<script>
import grandchild from './grandchild.vue';
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  components: {
    grandchild
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

Dans cet exemple, nous espérons obtenir les données de message définies dans le composant Parent dans le composant Petit-enfant. Voici l'implémentation spécifique :

Utilisez l'attribut provide dans le composant Parent pour fournir les données qui doivent être transmises :

<template>
  <div>
    <child1 :message="message"></child1>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello Vue!'
  }
};
</script>

Utilisez l'attribut inject dans le composant Grandchild pour injecter les données fournies par provide :

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

In de cette façon, le composant Petit-enfant Vous pouvez facilement obtenir les données de message fournies dans le composant Parent.

En plus d'utiliser des données fixes dans provide et inject, nous pouvons également utiliser des méthodes dans provide et inject pour fournir et obtenir des données. Par exemple, fournissez une méthode dans le composant Parent pour définir dynamiquement les données du message :

<template>
  <div>
    <child1 :set-message="setMessage"></child1>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      setMessage: message => {
        this.message = message;
      }
    };
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

Appelez la méthode setMessage dans le composant Child1 pour définir les données du message :

<template>
  <div>
    <child2 :message="message"></child2>
    <button @click="setMessage">Set Message</button>
  </div>
</template>

<script>
export default {
  props: ['setMessage'],
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

Injectez la méthode setMessage via l'attribut inject dans le composant Grandchild :

<template>
  <div>
    <p>{{message}}</p>
    <button @click="setMessage">Set Parent Message</button>
  </div>
</template>

<script>
export default {
  inject: ['setMessage', 'message']
};
</script>

Grâce à cela, le composant Grandchild peut appeler la méthode setMessage dans le composant Parent pour définir dynamiquement les données du message.

Résumé :

En utilisant les attributs provide et inject, nous pouvons facilement atteindre l'objectif de transmettre des données entre les niveaux. Lorsque vous utilisez ces deux propriétés, vous devez faire attention à éviter l'imbrication profonde et le couplage de composants afin d'atteindre les objectifs de simplicité et de maintenabilité du code.

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!