Un article pour parler de l'utilisation de provide et inject dans Vue

Comment utiliser provide et inject dans Vue ? L'article suivant vous présentera comment utiliser provide et inject dans Vue. J'espère qu'il vous sera utile !

Dans vue2.0, provide et inject sont optionnels (configuration) API La méthode est utilisé dans les composants pour résoudre le problème de la communication entre composants (grands-parents et petits-enfants). Il s'agit également de la communication entre les composants parent et enfant. Le composant parent est répertorié via des attributs personnalisés, tandis que les composants enfants sont répertoriés via des accessoires . Recevez de cette manière. Si vous souhaitez le transmettre couche par couche, cette méthode sera plus gênante et peu flexible. provide et inject sont la solution : Comment transmettre les données du composant ancêtre au composant petit-fils pour réaliser un transfert de composants entre niveaux vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的，解决的是跨组件(祖孙)间通信的一种方式

也就是父子组件间的通信,父组件上市通过自定义属性，而子组件间通过props这种方式接收，如果想要一层一层的传递，这种方式就会比较麻烦，不灵活

provide与inject就是解决：怎么从祖组件的数据，传递到孙组件，实现跨级组件传递数据的

在vue3.0里面，同样提供了provide与inject，使用起来更简单方便，单纯的从概念上去看，是比较抽象，难以理解的。【相关推荐：vuejs视频教程、web前端开发】

还是要从具体的实例出发

provide()函数

定义：提供一个值，可以被后代组件注入

实现： 父组件有一个provide,选项来提供数据，后代组件中有一个inject选项来开始使用父组件传递过来的数据

provide(第一个参数,第二个参数)，接收两个参数,第一个参数是要注入的key，它可以是一个字符串或一个symbol，第二个参数是要注入的值(具体要传递给子孙组件的数据)

provide是vue官方提供的componsition API

具体示例代码如下所示

import {reactive,provide} from "vue";

let person = reactive({name: 'itclanCoder',website: 'https://coder.itclan.cn'});
provide('person',person);

通过上面的provide提供一个值,就可以了的，那怎么样把这个数据传递到子孙组件，那么就需要用到inject了的

inject()函数

定义: 注入一个由祖先(父)组件或整个应用提供的值

实现: 接收父(祖)组件传递过来的值

inject(第一个参数,第二个参数(可选)):第一个参数是注入的key,来自父(祖)组件,它们两者是需要保持一致的

Vue会遍历父组件链,通过匹配key来确定所提供的值,如果父组件链上多个组件对同一个key提供了之,那么离得更近的将会覆盖链上更远的组件所提供的值

如果没有能通过key匹配到的值,inject()函数将返回undefined,除非提供一个默认值

第二个参数是可选的,即没有匹配到key时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数

那么必须将false作为第三个参数传入,表明这个函数就是默认值,而不是一个工厂函数

与注册生命周期钩子的API类似,inject()必须在组件的setup()阶段同步调用

具体示例代码

import {inject,toRefs} from  "vue";

const person = inject('person');
// 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数
const {name,website} = toRefs(person);

在孙组件中的模板即可以读取,从父组件传递过来的数据也是支持响应式的

{{person.name}}---{{person.website}}

若使用解构时,则模板中可直接使用变量

{{name}}--{{website}}

若使用解构时,则模板中可直接使用变量

{{name}}--{{website}}

注意

如果是解构变量,想要数据响应式,那么需要使用toRef()或toRefs()将数据进行转化为响应式

如下是完整的示例

import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 注入值的默认方式
const foo = inject('foo') 

// 注入响应式的值
const count = inject('count')

// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)

// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')

// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())

// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)

基本上用第一种注入默认值的方式,使用是最多的,接收父组件提供传递过来的值

总结

provide()与inject()

Dans vue3.0, provide et sont également fournis inject est plus simple et plus pratique à utiliser. D'un point de vue purement conceptuel, il est relativement abstrait et difficile à comprendre. [Recommandations associées : tutoriel vidéo vuejs

, Développement web front-end

]

Il faut encore partir d'exemples précis

Fonction provide()

Définition : Fournit une valeur qui peut être injectée par les composants descendantsImplémentation : Le composant parent a une option provide pour fournir des données. Il existe une option inject dans le composant descendant pour commencer à utiliser les données transmises par le composant parent🎜🎜. fournir (premier paramètre, n° Deux paramètres), recevant deux paramètres, le premier paramètre est la clé à injecter, qui peut être une chaîne ou un symbole, le deuxième paramètre Chaque paramètre est la valeur à injecter (données spécifiques à transmettre aux composants descendants)🎜🎜provide est l'API de composition officiellement fournie par vue🎜🎜 L'exemple de code spécifique est le suivant 🎜rrreee🎜 Il suffit de fournir une valeur via le provide ci-dessus. Comment transmettre ces données aux composants descendants, vous devez alors utiliser. 🎜

fonction inject()

de inject🎜Définition : injecter un ancêtre (parent) La valeur fournie par le composant ou l'ensemble de l'application🎜🎜Implémentation : Recevez la valeur transmise par le composant parent (ancêtre)🎜🎜inject(premier paramètre, deuxième paramètre (facultatif )) : Le premier paramètre est la <code>clé injectée, qui provient du composant parent (ancêtre). Les deux doivent être cohérents🎜🎜Vue. traversera la chaîne de composants parent, déterminera la valeur fournie en faisant correspondre la clé. Si plusieurs composants de la chaîne de composants parent fournissent la même clé, alors le plus proche écrasera celui plus loin dans la chaîne. valeur fournie🎜🎜S'il n'y a aucune valeur pouvant être mise en correspondance par key, la fonction inject() renverra undefined sauf si une valeur par défaut est fourni🎜 🎜Le deuxième paramètre est facultatif, c'est-à-dire que lorsqu'aucune clé ne correspond, la valeur par défaut est utilisée. Il peut également s'agir d'une fonction pour renvoyer certaines valeurs plus compliquées à créer. Si la valeur par défaut C'est une fonction elle-même 🎜🎜 Alors false doit être transmis comme troisième paramètre, indiquant que cette fonction est la valeur par défaut, pas une fonction d'usine 🎜🎜 et l'API De même, <code>inject() doit être appelé de manière synchrone dans la phase setup() du composant🎜🎜Exemple de code spécifique🎜rrreee🎜 Le modèle dans le composant petit-enfant peut être lu, les données transmises par le composant parent prennent également en charge la réactivité🎜rrreee🎜Si la déstructuration est utilisée, les variables peuvent être utilisées directement dans le modèle🎜rrreee🎜Si la déstructuration est utilisée, les variables peuvent être utilisées directement dans le modèle🎜rrreee🎜Remarque 🎜🎜Si vous déconstruisez des variables et souhaitez que les données soient réactives, vous devez utiliser toRef() ou toRefs() pour convertir les données en style responsive🎜🎜 Ce qui suit est un exemple complet🎜rrreee🎜Utilisez essentiellement la première façon d'injecter des valeurs par défaut, qui est la plus utilisée, et recevez la valeur transmise fournie par le composant parent🎜<h2 data-id="heading-2"><strong>Résumé </strong></h2>🎜<code>provide() et inject() sont relativement simples à utiliser. Ils constituent un moyen de résoudre la communication entre composants. Pour l'imbrication hiérarchique. Pour les composants plus profonds, si le composant descendant souhaite utiliser les données du composant parent, il peut alors utiliser cette méthode pour transférer les données. Cela est encore quelque peu utile dans certains cas. développement commercial quotidien, et c'est aussi un problème dans les entretiens. Questions d'entretien à haute fréquence, comment résoudre les composants inter-niveaux, communication des composants non parent-enfant🎜🎜 (Partage de vidéos d'apprentissage : 🎜Tutoriel d'introduction à vuejs🎜, 🎜Programmation de base vidéo🎜)🎜

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!