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 解决这类问题。
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 ：
<!-- 祖先组件: -->
<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 实现父子组件通信的一些场景：
在 Vue 中，父子组件之间的通信可以通过 props 实现，但是当跨级组件时，使用 props 传递数据将会变得非常繁琐。而此时可以通过 provide / inject 方式，在祖先组件中提供数据，然后在子孙组件中通过 inject 获取所需数据。
在某些情况下，父组件并不清楚子组件内部的数据具体存放在哪个 props 中，而此时可以通过 provide 的方式将数据传递到子组件中。
通过 provide / inject 方式，我们可以将数据提供给子孙组件，给父级留下观察的入口，从而实现组件集成。
在 Vue 中，props 是唯一一种官方的、比较好用的、用于父子之间传递数据的方式。但是在某些情况下，如多个子组件希望使用相同的全局变量、提供的公共方法的情况下，就可以使用 provide / inject 方式。
通过本文的介绍，我们了解到了 Vue 中提供的 provide / inject 的基本用法，以及它们的使用场景。
在使用 provide / inject 的过程中，我们需要注意三点：
provide / inject 主要用于高阶插件开发，对于开发普通组件的程序员是不需要掌握的。provide / inject 主要解决的问题是跨层级组件之间的信息传递，常用于插件开发。最后，当我们遇到跨级组件通信等问题时，就可以使用 provide / inject
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 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. 🎜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 : 🎜provide / inject, puis obtenir les données requises via inject dans le composant descendant. 🎜provide. 🎜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. 🎜provide / inject. 🎜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 : 🎜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. 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. 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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
