文章预览
前言 没有看过 provide 和 inject 函数源码的小伙伴可能觉得他们实现数据多级传递非常神秘，其实他的源码非常简单，这篇文章欧阳来讲讲 provide 和 inject 函数是如何实现数据多级传递的。ps：本文中使用的Vue版本为 3.5.13 。 看个demo 先来看个demo，这个是父组件，代码如下： < ChildDemo /> < /template> import ChildDemo from "./ child.vue "; import { ref, provide } from " vue "; // 提供响应式的值 const count = ref(0); provide(" count ", count); 在父组件中使用 provide 为后代组件注入一个 count 响应式变量。 再来看看子组件 child.vue 代码如下： < GrandChild /> < /template> import GrandChild from "./g rand-child.vue "; 从上面的代码可以看到在子组件中什么事情都没做，只渲染了孙子组件。 我们再来看看孙子组件 grand-child.vue ，代码如下： import { inject } from "vue" ; // 注入响应式的值 const count = inject
………………………………
