vueprovide（vueprovide inject）

本篇文章给大家谈谈vueprovide，以及vueprovide inject对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vueprovide传值对象不能取data的值
• 2、[转]VUE3中的Provide / Inject用法
• 3、vue之$children和$parent， provide和inject用法以及使用style的方式 显示背景图片
• 4、vue中provide写成对象和函数的区别

vueprovide传值对象不能取data的值

当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组告裂件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：

在这里插入图片描述

注意，虽然这里的 Footer 组件可能根本不关心这些 props，但为了使 DeepChild 能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”，显然是我们希望尽量避免的情况。

provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条铅腊链路槐友滑的依赖。

[img]

[转]VUE3中的Provide / Inject用法

通常，当我们需要从父组件向子组件传递数据时，我们使用 props 。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会碰数很麻烦。

对于这种情况，我们可以使用一对 provide 和 inject 。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

如果要将 todo-items 的长度直接传递给 TodoListStatistics，笑悔首我们要将 prop 逐级传递下去：TodoList - TodoListFooter - TodoListStatistics。通过 provide/inject 的方式，我们可以直接执行以下操作：

但是，如果我们尝试在此处 provide 一些组件的实例 property，这将是不起作用的：

要访问组件实例 property，我们需要将 provide 转换为返回对象的函数：

这使我们能够更安全地继续开发该组件，前返而不必担心可能会更改/删除子组件所依赖的某些内容。这些组件之间的接口仍然是明确定义的，就像 prop 一样。

实际上，你可以将依赖注入看作是“长距离的 prop”，除了：

在上面的例子中，如果我们更改了 todos 的列表，这个变化并不会反映在 inject 的 todoLength property 中。这是因为默认情况下，provide/inject 绑定并不是响应式的。我们可以通过传递一个 ref property 或 reactive 对象给 provide 来改变这种行为。在我们的例子中，如果我们想对祖先组件中的更改做出响应，我们需要为 provide 的 todoLength 分配一个组合式 API computed property：

在这种情况下，任何对 todos.length 的改变都会被正确地反映在注入 todoLength 的组件中。在 响应式计算和侦听章节 中阅读更多关于 computed 的信息，以及在 组合式 API 章节 中阅读更多关于 reactive provide/inject 的信息。

vue之$children和$parent， provide和inject用法以及使用style的方式 显示背景图片

1.使用$parent可以获取父组件没传的属性和方法

第一步：父组件定义一个数据

第二步：

$parent和$children的区别是$parent方法在created里调用，$children方法在mounted里调用

2.通过 provide和inject可以父传子也可以爷爷传孙子  可以向下传递，不可以孝轿氏兄弟之间传值，兄弟传值建议使用事件总线的方式

注意：provide/inject可实现跨组件传值，数据的流只能是向下传递，其中父组件provide，子巧散组件inject。provide : 必须在父组件进行使用，用来给后代组件注入依赖

（属性或方法）inject :  必须

在子组件进行使用，用来帆伏获取根组件定义的要跨组件传递的数据

基本传值方式

第一步：

第二步：

第三步：验证子传父不成功，会进行报错

第四步：如果父级组件的值是动态从接口中获取的，需要把provide改成函数的形式，数据以函数的形式返回

第五步：儿子也可以使用爷爷传的内容

3.在Vue脚手架中使用style的方式  显示背景图片

vue中provide写成对象和函数的区别

vue中provide写成对象和函数的区别:

vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject就可以注入祖父组件传递过来的数据，不论组件层次有多深，始终生效。

首先来看下两者的概念：

1. provide：是一个对象，或者是一个返回对象的函数。可以将想要传旅册旦递给拆扰子孙组件的属性写入该对象中。

注意：若子孙组件中的provide和父组件中provide提供的key有所相同，那么子孙组件会覆盖原本父组件的value

2. inject：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或 一个对象，该对象的： from 属性是在可用的注入内容姿森中搜索用的 key (字符串或 Symbol) default 属性是降级情况下使用的 value

关于vueprovide和vueprovide inject的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。