Qu'est-ce que fournir et injecter dans Vue et comment l'utiliser ?

Vue.js est un framework JavaScript très populaire dans le monde front-end actuel. Il possède de nombreuses excellentes fonctionnalités telles que la liaison de données réactive, l'architecture de vue composée de composants, le suivi des dépendances et le rendu des modèles. La fonction la plus couramment utilisée est la programmation de composants. Vue nous fournit des tests fonctionnels tels que l'enregistrement des composants, le passage des paramètres des composants, etc. Cependant, dans certains cas, la transmission des données des composants rencontrera des problèmes plus difficiles à ce stade. provide et inject fournis dans Vue pour résoudre ce type de problème. provide 和 inject 解决这类问题。

理解 provide & inject

provide

Vue2.2.0 版本新增了 provide / inject ， 其能够更好的帮助我们完成面向对象编程的需求。通俗的讲 provide 就是我们可以在父组件中提供数据，然后再子组件中使用 inject 来获取所需要的数据的一个过程。

提供一个例子来更好的理解 provide ：

<template>
  <!-- 父组件 -->
  <div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from './child-component';
  export default {
    provide: {
      foo: 'bar'
    },
    components: {
      childComponent
    }
  }
</script>

在父组件中，我们向下提供了一个键为 foo 的数据给到子组件中。随后在子组件中我们我可以通过 inject 来获取这份数据。

<template>
  <!-- 子组件 -->
  <div>
    <p>我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}</p>
  </div>
</template>
<script>
  export default {
    inject: ['foo']
  }
</script>

到这里，我们就实现了提供和注入的完整过程。通过 provide 我们在父组件中提供数据，随后再子组件中使用 inject 来获取数据，从而完成了组件之间的数据传递。

inject

inject 是一个数组，列表中声明要注入的属性名。在子组件注入一个对象，该对象的属性名与提供的键名相同，值为提供的数据。

提供一个具体的事例来理解 inject ：

<!-- 祖先组件: -->
<template>
  <div>
    <div>我是祖先组件</div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    provide() {
      return { name: 'Colin' }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <div>我是父组件</div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from 'view/child-component.vue';
  export default {
    components: {
      childComponent
    }
  }
</script>

<!-- 子组件: -->
<template>
  <div>
    <div>我是子组件</div>
    <p>祖先组件中给我的数据是什么呢？ {{ name }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['name']
  }
</script>

以上代码中，provide 函数可以理解为父组件向下层子组件提供数据，子组件再通过 inject 来接收这份数据，实现了数据的传输过程。

使用场景

此时，你可能会问：我们已经有了 props 父子组件之间的通信了，为什么还需要 provide/inject 呢？

其实，这两者在使用场景上是不太相同的。以下是一些可使用 provide/inject 实现父子组件通信的一些场景：

1. 跨级组件间的通信

在 Vue 中，父子组件之间的通信可以通过 props 实现，但是当跨级组件时，使用 props 传递数据将会变得非常繁琐。而此时可以通过 provide / inject 方式，在祖先组件中提供数据，然后在子孙组件中通过 inject 获取所需数据。

2. 父组件不清楚具体的子组件实现

在某些情况下，父组件并不清楚子组件内部的数据具体存放在哪个 props 中，而此时可以通过 provide 的方式将数据传递到子组件中。

3. 可以用一个观察者来观察值的变化，帮助组件集成的实现

通过 provide / inject 方式，我们可以将数据提供给子孙组件，给父级留下观察的入口，从而实现组件集成。

4. 不适合使用 props 时

在 Vue 中，props 是唯一一种官方的、比较好用的、用于父子之间传递数据的方式。但是在某些情况下，如多个子组件希望使用相同的全局变量、提供的公共方法的情况下，就可以使用 provide / inject 方式。

总结

通过本文的介绍，我们了解到了 Vue 中提供的 provide / inject 的基本用法，以及它们的使用场景。

在使用 provide / inject 的过程中，我们需要注意三点：

1. provide / inject 主要用于高阶插件开发，对于开发普通组件的程序员是不需要掌握的。
2. provide 选项应该是一个对象或返回一个对象的函数。这个对象包含可注入其它组件的属性。
3. provide / inject 主要解决的问题是跨层级组件之间的信息传递，常用于插件开发。

最后，当我们遇到跨级组件通信等问题时，就可以使用 provide / inject

Comprendre fournir et injecter

provide

La version Vue2.2.0 ajoute provide / inject, ce qui peut mieux nous aider à répondre aux besoins de programmation orientée objet. En termes simples, provide est un processus dans lequel nous pouvons fournir des données dans le composant parent, puis utiliser inject dans le composant enfant pour obtenir les données requises. 🎜🎜Fournissez un exemple pour mieux comprendre provide : 🎜rrreee🎜Dans le composant parent, nous fournissons une donnée avec la clé foo au composant enfant . Ensuite, dans le composant enfant, nous pouvons obtenir ces données via inject. 🎜rrreee🎜À ce stade, nous avons mis en œuvre le processus complet de fourniture et d'injection. Grâce à provide, nous fournissons des données dans le composant parent, puis utilisons inject dans le composant enfant pour obtenir les données, complétant ainsi le transfert de données entre les composants. 🎜

inject

🎜inject est un tableau et la liste déclare les noms de propriétés à injecter. Injectez un objet dans le sous-composant. Le nom de propriété de l'objet est le même que le nom de clé fourni et sa valeur correspond aux données fournies. 🎜🎜Fournissez un exemple spécifique pour comprendre inject : 🎜rrreee🎜Dans le code ci-dessus, la fonction provide peut être comprise comme le composant parent fournissant des données à l'enfant de niveau inférieur. composant, et le composant enfant passe ensuite inject pour recevoir ces données et implémenter le processus de transmission de données. 🎜

Scénarios d'utilisation

🎜À ce stade, vous pouvez vous demander : nous avons déjà une communication d'accessoires entre les composants parent et enfant, pourquoi avons-nous besoin de provide/inject ? 🎜🎜En fait, les deux sont assez différents dans les scénarios d'utilisation. Voici quelques scénarios dans lesquels provide/inject peut être utilisé pour implémenter la communication entre composants parent-enfant : 🎜

1. Communication entre composants inter-niveaux

🎜Dans Vue, parent-enfant La communication entre les composants peut être réalisée via des accessoires, mais lorsque des composants multi-niveaux sont utilisés, la transmission de données à l'aide d'accessoires deviendra très lourde. À ce stade, vous pouvez fournir des données dans le composant ancêtre via provide / inject, puis obtenir les données requises via inject dans le composant descendant. 🎜

2. Le composant parent ne connaît pas l'implémentation spécifique du composant enfant

🎜Dans certains cas, le composant parent ne sait pas où se trouvent les données à l'intérieur du composant enfant. Le composant est stocké dans les accessoires, et à ce moment, les données peuvent être transmises au composant enfant via provide. 🎜

3. Vous pouvez utiliser un observateur pour observer les changements de valeurs afin de faciliter la mise en œuvre de l'intégration des composants

🎜Grâce au provide / inject Méthode, Nous pouvons fournir des données aux composants descendants et laisser un point d'entrée d'observation au parent pour réaliser l'intégration des composants. 🎜

4. Lorsque les accessoires ne conviennent pas

🎜Dans Vue, les accessoires sont la seule méthode officielle et facile à utiliser utilisée pour passer entre le parent et l'enfant. de données. Mais dans certains cas, par exemple lorsque plusieurs sous-composants souhaitent utiliser les mêmes variables globales et les mêmes méthodes publiques fournies, vous pouvez utiliser la méthode provide / inject. 🎜

Résumé

🎜Grâce à l'introduction de cet article, nous avons découvert l'utilisation de base de provide / inject fourni dans Vue, ainsi que leurs scénarios d'utilisation. 🎜🎜Dans le processus d'utilisation de provide / inject, nous devons prêter attention à trois points : 🎜

1. provide / inject est principalement utilisé pour les hautes performances. mettre fin au développement de plug-ins. Les programmeurs développant des composants ordinaires n'ont pas besoin de le maîtriser.
2. L'option provide doit être un objet ou une fonction qui renvoie un objet. Cet objet contient des propriétés qui peuvent être injectées dans d'autres composants.
3. provide / inject Le principal problème résolu est le transfert d'informations entre les composants multi-niveaux, qui est souvent utilisé dans le développement de plug-ins.

🎜Enfin, lorsque nous rencontrons des problèmes tels que la communication entre composants entre niveaux, nous pouvons utiliser provide / inject pour résoudre le problème, ce qui nous fournit une méthode de programmation plus pratique. , rendant notre code plus concis et plus facile à comprendre. 🎜

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!