Comment utiliser provide/inject dans Vue pour transférer des données entre les composants ancêtres et les composants descendants

Dans Vue, nous avons souvent besoin de transférer des données entre composants. Lors du transfert de données entre les composants ancêtres et les composants descendants, nous pouvons utiliser provide/inject fourni par Vue.

1. Le rôle de provide/inject

Dans Vue, provide et inject sont une paire d'API utilisées pour le transfert de données entre ancêtres et descendants.

Plus précisément, provide est utilisé pour définir certaines données/méthodes qui doivent être partagées dans les composants ancêtres, tandis que inject est utilisé pour injecter ces données/méthodes dans les composants descendants.

De cette façon, les données/méthodes fournies dans le composant ancêtre peuvent être utilisées par le composant descendant, réalisant ainsi bien le transfert de données.

2. Utilisation de provide/inject

Maintenant, voyons comment utiliser provide/inject.

Dans les composants ancêtres, nous pouvons utiliser provide pour définir les données/méthodes qui doivent être partagées, par exemple :

provide: {
  theme: 'blue',
  changeTheme: theme => {
    this.theme = theme
  }
}

Dans cet exemple, nous définissons une variable de thème et une méthode changeTheme, et les partageons avec les descendants via les composants provide .

Dans les composants descendants, nous pouvons utiliser inject pour recevoir ces données/méthodes, par exemple :

inject: ['theme', 'changeTheme']

Dans cet exemple, nous recevons les deux données/méthodes theme et changeTheme via inject.

De cette façon, nous pouvons utiliser les deux thèmes de données/méthodes et changeTheme dans les composants descendants.

this.theme // 获取theme变量的值
this.changeTheme('red') // 改变主题色

Il convient de noter que lorsque nous utilisons inject pour injecter des données/méthodes, nous n'avons pas besoin de les nommer de la même manière que ceux définis par provide. Nous pouvons choisir un nom plus sémantique si nécessaire.

De plus, il convient de noter que lors de l'utilisation de provide/inject, vous devez vous assurer que le composant ancêtre est créé avant le composant descendant, sinon les données/méthodes ne peuvent pas être injectées. Cela peut généralement être assuré par l'ordre dans lequel les composants sont créés.

3. Exemple de code

Maintenant, examinons un exemple de code complet pour mieux comprendre comment utiliser provide/inject.

Composant Parent :

<template>
  <div>
    <h3>当前主题色为{{theme}}</h3>
    <button @click="changeTheme('blue')">蓝色</button>
    <button @click="changeTheme('green')">绿色</button>
    <button @click="changeTheme('red')">红色</button>
    <hr>
    <child></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  provide() {
    return {
      theme: this.theme,
      changeTheme: this.changeTheme
    }
  },
  data() {
    return {
      theme: 'blue'
    }
  },
  methods: {
    changeTheme(theme) {
      this.theme = theme
    }
  }
}
</script>

Composant Enfant :

<template>
  <div>
    <h3>我是子组件</h3>
    <p>当前主题色为：{{theme}}</p>
    <button @click="changeTheme('blue')">蓝色</button>
    <button @click="changeTheme('green')">绿色</button>
    <button @click="changeTheme('red')">红色</button>
  </div>
</template>

<script>
export default {
  inject: ['theme', 'changeTheme'],
  mounted() {
    console.log(this.theme) // blue
  },
  methods: {
    changeTheme(theme) {
      this.changeTheme(theme)
    }
  }
}
</script>

Dans cet exemple, nous définissons une variable de thème et une méthode changeTheme dans le composant parent et les partageons avec le composant enfant via provide.

Dans le sous-composant, nous recevons les deux données/méthodes theme et changeTheme via inject, et changeons la couleur du thème via la méthode changeTheme.

4. Résumé

L'utilisation de provide/inject peut réaliser efficacement le transfert de données entre les composants ancêtres et les composants descendants. Lors de son utilisation, il suffit de définir les données/méthodes qui doivent être partagées dans le composant ancêtre, puis de les injecter dans le composant descendant.

Il convient de noter que lors de l'utilisation de provide/inject, vous devez vous assurer que le composant ancêtre est créé avant le composant descendant, sinon les données/méthodes ne peuvent pas être injectées.

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!