La communication globale des composants Vue3 fournit/injecte une analyse du code source-Voir.js-php.cn

1. Avant-propos

Comme son nom l'indique, le composant grand-père-petit-fils a une relation de référence plus profonde que la communication entre les composants parent-enfant (également appelés « composants de saut de génération ») :

Le composant C est introduit dans le composant B, et le composant B est introduit dans le rendu du composant A, à ce moment A est le niveau grand-père de C (il peut y avoir des relations plus hiérarchiques, si vous utilisez des accessoires, vous ne pouvez le passer que niveau par niveau, ce qui est trop lourd, donc nous). besoin d’une méthode de communication plus directe.

La relation entre eux est la suivante. Grandson.vue n'est pas directement monté sous Grandfather.vue Il y a au moins un Son.vue entre eux (il peut y en avoir plusieurs) :

Grandfather.vue
└─Son.vue
  └─Grandson.vue

Copier après la connexion

En raison de la relation entre les supérieurs et. Cohérence des subordonnés, le schéma de communication composante grand-père-petit-fils s'applique également à la communication composante parent-enfant, il suffit de remplacer la relation grand-père-petit-fils par une relation père-fils.

2. provide / inject

Cette fonctionnalité comporte deux parties : Grandfather.vue a une option provide pour fournir des données, et Grandson.vue a une option inject pour commencer à utiliser les données.

Grandfather.vue transmet la valeur à Grandson.vue via provide (peut inclure des fonctions définies)
Grandson.vue déclenche l'exécution de l'événement du composant Grandfather via inject à Grandfather.vue

quel que soit le Hiérarchie des composants Quelle que soit sa profondeur, le composant qui initie provide peut être utilisé comme fournisseur de dépendances pour tous ses composants subordonnés. Le contenu de cette partie a beaucoup changé, mais il est en fait très simple à utiliser. , il y a aussi des similitudes :

Parent Le composant n'a pas besoin de savoir quels sous-composants utilisent la propriété qu'il fournit
Le sous-composant n'a pas besoin de savoir d'où vient la propriété inject

De plus, une chose à retenir est que les liaisons provide et inject ne répondent pas. C'est intentionnel, mais si un objet écoutable est transmis, les propriétés de l'objet seront toujours réactives.

3. Initier provide

Examinons d'abord l'utilisation de 2.x:

export default {
  // 定义好数据
  data () {
    return {
      tags: [ &#39;中餐&#39;, &#39;粤菜&#39;, &#39;烧腊&#39; ]
    }
  },
  // provide出去
  provide () {
    return {
      tags: this.tags
    }
  }
}

Copier après la connexion

L'ancienne version de provide est similaire à data et est configurée comme une fonction qui renvoie un objet.

La nouvelle version de provide dans 3.x est assez différente dans son utilisation de 2.x.

Dans 3.x, provide doit être importé et activé dans la configuration, et constitue désormais une toute nouvelle méthode.

Chaque fois que vous souhaitez fournir une donnée, vous devez l'appeler séparément.
Chaque fois que vous appelez, vous devez transmettre 2 paramètres :

paramètretypedescriptioncléchaînenom des donnéesvaleurn'importe lequel Le valeur des données

Voyons comment créer un provide :

// 记得导入provide
import { defineComponent, provide } from &#39;vue&#39;

export default defineComponent({
  // ...
  setup () {
    // 定义好数据
    const msg: string = &#39;Hello World!&#39;;

    // provide出去
    provide(&#39;msg&#39;, msg);
  }
})

Copier après la connexion

L'opération est très simple, n'est-ce pas, mais il faut noter que provide n'est pas responsive Si vous souhaitez le rendre responsive, vous devez transmettre des données réactives

4. Réception d'inject

Examinons d'abord l'utilisation de 2.x :

export default {
  inject: [&#39;tags&#39;],
  mounted () {
    console.log(this.tags);
  }
}

Copier après la connexion

L'utilisation de l'ancienne version d'inject est similaire à celle des accessoires. x inject est également assez différent de celui de 2.x .

Dans 3.x, inject est identique à provide. Il doit d'abord être importé puis activé dans la configuration. C'est également une toute nouvelle méthode.

Chaque fois que vous souhaitez injecter une donnée, vous devez l'appeler séparément.
A chaque appel, il vous suffit de passer 1 paramètre :

paramètretypedescriptioncléchaînenom de données correspondant à fournir

// 记得导入inject
import { defineComponent, inject } from &#39;vue&#39;

export default defineComponent({
  // ...
  setup () {
    const msg: string = inject(&#39;msg&#39;) || &#39;&#39;;
  }
})

Copier après la connexion

也是很简单（写 TS 的话，由于 inject 到的值可能是 undefined，所以要么加个 undefined 类型，要么给变量设置一个空的默认值）。

5、响应性数据的传递与接收

之所以要单独拿出来说，是因为变化真的很大

在前面我们已经知道，provide 和 inject 本身不可响应，但是并非完全不能够拿到响应的结果，只需要我们传入的数据具备响应性，它依然能够提供响应支持。

我们以 ref 和 reactive 为例，来看看应该怎么发起 provide 和接收 inject。

先在 Grandfather.vue 里 provide 数据：

export default defineComponent({
  // ...
  setup () {
    // provide一个ref
    const msg = ref<string>(&#39;Hello World!&#39;);
    provide(&#39;msg&#39;, msg);

    // provide一个reactive
    const userInfo: Member = reactive({
      id: 1,
      name: &#39;Petter&#39;
    });
    provide(&#39;userInfo&#39;, userInfo);

    // 2s 后更新数据
    setTimeout(() => {
      // 修改消息内容
      msg.value = &#39;Hi World!&#39;;

      // 修改用户名
      userInfo.name = &#39;Tom&#39;;
    }, 2000);
  }
})

Copier après la connexion

在 Grandsun.vue 里 inject 拿到数据：

export default defineComponent({
  setup () {
    // 获取数据
    const msg = inject(&#39;msg&#39;);
    const userInfo = inject(&#39;userInfo&#39;);

    // 打印刚刚拿到的数据
    console.log(msg);
    console.log(userInfo);

    // 因为 2s 后数据会变，我们 3s 后再看下，可以争取拿到新的数据
    setTimeout(() => {
      console.log(msg);
      console.log(userInfo);
    }, 3000);

    // 响应式数据还可以直接给 template 使用，会实时更新
    return {
      msg,
      userInfo
    }
  }
})

Copier après la connexion

非常简单，非常方便！！！

响应式的数据 provide 出去，在子孙组件拿到的也是响应式的，并且可以如同自身定义的响应式变量一样，直接 return 给 template 使用，一旦数据有变化，视图也会立即更新。

但上面这句话有效的前提是，不破坏数据的响应性，比如 ref 变量，你需要完整的传入，而不能只传入它的 value，对于 reactive 也是同理，不能直接解构去破坏原本的响应性。

切记！切记！！！

6、引用类型的传递与接收 (针对非响应性数据的处理)

provide 和 inject 并不是可响应的，这是官方的故意设计，但是由于引用类型的特殊性，在子孙组件拿到了数据之后，他们的属性还是可以正常的响应变化。

先在 Grandfather.vue 里 provide 数据：

export default defineComponent({
  // ...
  setup () {
    // provide 一个数组
    const tags: string[] = [ &#39;中餐&#39;, &#39;粤菜&#39;, &#39;烧腊&#39; ];
    provide(&#39;tags&#39;, tags);

    // provide 一个对象
    const userInfo: Member = {
      id: 1,
      name: &#39;Petter&#39;
    };
    provide(&#39;userInfo&#39;, userInfo);

    // 2s 后更新数据
    setTimeout(() => {
      // 增加tags的长度
      tags.push(&#39;叉烧&#39;);

      // 修改userInfo的属性值
      userInfo.name = &#39;Tom&#39;;
    }, 2000);
  }
})

Copier après la connexion

在 Grandsun.vue 里 inject 拿到数据：

export default defineComponent({
  setup () {
    // 获取数据
    const tags: string[] = inject(&#39;tags&#39;) || [];
    const userInfo: Member = inject(&#39;userInfo&#39;) || {
      id: 0,
      name: &#39;&#39;
    };

    // 打印刚刚拿到的数据
    console.log(tags);
    console.log(tags.length);
    console.log(userInfo);

    // 因为 2s 后数据会变，我们 3s 后再看下，能够看到已经是更新后的数据了
    setTimeout(() => {
      console.log(tags);
      console.log(tags.length);
      console.log(userInfo);
    }, 3000);
  }
})

export default defineComponent({
  setup () {
    // 获取数据
    const tags: string[] = inject(&#39;tags&#39;) || [];
    const userInfo: Member = inject(&#39;userInfo&#39;) || {
      id: 0,
      name: &#39;&#39;
    };

    // 打印刚刚拿到的数据
    console.log(tags);
    console.log(tags.length);
    console.log(userInfo);

    // 因为 2s 后数据会变，我们 3s 后再看下，能够看到已经是更新后的数据了
    setTimeout(() => {
      console.log(tags);
      console.log(tags.length);
      console.log(userInfo);
    }, 3000);
  }
})

Copier après la connexion

引用类型的数据，拿到后可以直接用，属性的值更新后，子孙组件也会被更新。
但是！！！由于不具备真正的响应性，return 给模板使用依然不会更新视图，如果涉及到视图的数据，请依然使用响应式 API 。

7、基本类型的传递与接收 (针对非响应性数据的处理)

基本数据类型被直接 provide 出去后，再怎么修改，都无法更新下去，子孙组件拿到的永远是第一次的那个值。

先在 Grandfather.vue 里 provide 数据：

export default defineComponent({
  // ...
  setup () {
    // provide 一个数组的长度
    const tags: string[] = [ &#39;中餐&#39;, &#39;粤菜&#39;, &#39;烧腊&#39; ];
    provide(&#39;tagsCount&#39;, tags.length);

    // provide 一个字符串
    let name: string = &#39;Petter&#39;;
    provide(&#39;name&#39;, name);

    // 2s 后更新数据
    setTimeout(() => {
      // tagsCount 在 Grandson 那边依然是 3
      tags.push(&#39;叉烧&#39;);

      // name 在 Grandson 那边依然是 Petter
      name = &#39;Tom&#39;;
    }, 2000);
  }
})

Copier après la connexion

在 Grandsun.vue 里 inject 拿到数据：

export default defineComponent({
  setup () {
    // 获取数据
    const name: string = inject(&#39;name&#39;) || &#39;&#39;;
    const tagsCount: number = inject(&#39;tagsCount&#39;) || 0;

    // 打印刚刚拿到的数据
    console.log(name);
    console.log(tagsCount);

    // 因为 2s 后数据会变，我们 3s 后再看下
    setTimeout(() => {
      // 依然是 Petter
      console.log(name);

      // 依然是 3
      console.log(tagsCount);
    }, 3000);
  }
})

Copier après la connexion

很失望，并没有变化。

那么是否一定要定义成响应式数据或者引用类型数据呢？

当然不是，我们在 provide 的时候，也可以稍作修改，让它能够同步更新下去。

先在 Grandfather.vue 里 provide 数据：

export default defineComponent({
  // ...
  setup () {
    // provide 一个数组的长度
    const tags: string[] = [ &#39;中餐&#39;, &#39;粤菜&#39;, &#39;烧腊&#39; ];
    provide(&#39;tagsCount&#39;, (): number => {
      return tags.length;
    });

    // provide 字符串
    let name: string = &#39;Petter&#39;;
    provide(&#39;name&#39;, (): string => {
      return name;
    });

    // 2s 后更新数据
    setTimeout(() => {
      // tagsCount 现在可以正常拿到 4 了
      tags.push(&#39;叉烧&#39;);

      // name 现在可以正常拿到 Tom 了
      name = &#39;Tom&#39;;
    }, 2000);
  }
})

Copier après la connexion

再来 Grandsun.vue 里修改一下 inject 的方式，看看这次拿到的数据：

export default defineComponent({
  setup () {
    // 获取数据
    const tagsCount: any = inject(&#39;tagsCount&#39;);
    const name: any = inject(&#39;name&#39;);

    // 打印刚刚拿到的数据
    console.log(tagsCount());
    console.log(name());

    // 因为 2s 后数据会变，我们 3s 后再看下
    setTimeout(() => {
      // 现在可以正确得到 4
      console.log(tagsCount());

      // 现在可以正确得到 Tom
      console.log(name());
    }, 3000);
  }
})

Copier après la connexion

这次可以正确拿到数据了，看出这2次的写法有什么区别了吗？

基本数据类型，需要 provide 一个函数，将其 return 出去给子孙组件用，这样子孙组件每次拿到的数据才会是新的。
但由于不具备响应性，所以子孙组件每次都需要重新通过执行 inject 得到的函数才能拿到最新的数据。

按我个人习惯来说，使用起来挺别扭的，能不用就不用……

由于不具备真正的响应性，return 给模板使用依然不会更新视图，如果涉及到视图的数据，请依然使用响应式 API 。

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!

Étiquettes associées：

vue3 provide inject

source：yisu.com

Article précédent：Comment utiliser les instructions de configuration et personnalisées dans Vue3 Article suivant：Comment utiliser vue3+ts+vite+electron pour créer une application de bureau

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur