Provide/Inject 依赖注入(未完待续)

已于 2024-01-10 21:58:43 修改
阅读量554 收藏 5
点赞数 6
分类专栏： vuejs 文章标签： vuejs vue.js 前端
于 2024-01-10 21:47:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dallasnash/article/details/135513906
版权

父组件传递给子组件数据，通过props，但是需要逐层传递
provide/Inject 的推出就是为了解决这个问题，它提供了一种组件之间共享此类值的方式,不必通过组件树每层级显示地传递props
目的是为了共享那些被 认为对于一个组件树而言是全局的数据

provide 接受两个参数：第一个参数是要注入的 key，
可以是一个字符串或者一个 symbol，第二个参数是要注入的值。

Inject 注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

根节点向子节点传递参数

可以通过Provide从Root传递给DeepChild

APP.VUE中引入组件

在myprofile中引入下一层的组件helloworld

使用inject取出值

使用Symbol来避免key重复
Symbol是一种基本数据类型，函数返回symbol类型的值，该类型具有静态属性和静态方法。
每一个symbol的值 都是唯一的。

结果：

土井塔克树1412
关注
专栏目录
Vue3 Provide/Inject 依赖注入
且听风吟的博客
05-09 1183
Vue3 Provide/Inject 依赖注入
vue3 - 17.provide/inject依赖注入（跨级别组件传参）
qq_34111842的博客
10-23 803
在vue中，provide/inject是通过原型链实现的。作用是在根组件注册一次，在其他的子组件都可以访问到数据。
详解Vue实战指南之依赖注入(provide/inject)
12-30
案例 UI美眉说咱家的选项菜单太丑了，小哥哥能不能美化一下呀，洒家自然是说小意思啦~ 自定义一个select组件，so easy~ 简单粗暴型： <el v-model=favourite option=[]></el> option作为数据进来就ok啦。 然后发现下列问题: key-value，不是所有的接口都是id-name option要disabled 怎么办？ option存在几种情况怎么办？ … 回头看看原生的写法是这样： <select v-model=favourite> <option value=1>V
provide/inject
one-way or another
08-09 1226
概述 provide/inject：简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。 需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。 写法 // 传入对象写法 provide: { foo: 'bar' } // 函数写法 provide (...
组件通信——provide 和 inject 实现爷孙组件通信
最新发布
a123456234的博客
09-10 1062
provide和inject是 Vue.js 提供的一种在组件之间共享数据的机制，它允许在组件树中的任何地方注入依赖项。这对于跨越多个层级的组件间通信特别有用，因此无需手动将prop数据逐层传递下去。provide在一个组件中使用provide方法来定义要提供的数据或方法。provide方法返回一个对象，该对象包含了要提供的数据或方法。inject在另一个组件中使用inject方法来注入这些数据或方法。inject方法接收一个数组或对象，指明要注入的数据或方法名称。provide和inject。
provide/inject 依赖注入
王飞
09-05 425
provide/inject 依赖注入相比 props，极大的减少了依赖嵌套，使得代码更加的简洁并且利于维护，日常开发中要思考多加思考是否能够依赖注入解决问题。
vue中的provide和inject
热门推荐
Cassie's blog
10-11 5万+
浅析 provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是...
Vue 2.0 中依赖注入 provide/inject组合实战
12-03
Vue 2.0 中的依赖注入机制主要是通过 `provide` 和 `inject` 选项来实现的，这是一种在组件树中跨级传递数据的方法。当组件层级深入，子组件需要访问到远距离的祖辈组件的状态或者方法时，传统的 props 传递方式可能...
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
原因在于`provide/inject`本身并不支持响应式，它只是简单地传递了一个引用，而不是建立了一个响应式的依赖关系。当我们尝试在父组件中直接更改提供给子孙的属性（如`this._provided.foo`），子组件并不能感知到这个...
Vue3封装知识点（三）依赖注入：provide和inject详细介绍
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-19 2万+
在vue3中project和inject详细使用介绍，使用技巧和原理，简单易懂！
“provide/inject“模式（依赖注入）
qq_40278396的博客
08-15 1019
provide和inject是 Vue.js 提供的用于跨组件通信的工具。适用于深层次组件树结构中避免 props 多层传递的问题。可以与响应式状态结合使用，以实现对提供数据的动态更新。
vue provide/inject
布里渊区
06-28 196
provide/inject提供了一种新的组件间通信的方法。它允许父组件向子孙组件间进行跨层级的数据分发。但是provide/inject是非响应式的，如果要子孙组件根据父组件的值进行改变，provide/inject机制不是一个好的选择。此时可以使用Vuex来管理状态。 提示：provide和inject绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 ...
Provide & Inject 的使用
pukun888的博客
08-02 120
1. 作用 当组件树过于庞大时，其中一个子组件需要调用父组件中的数据就很麻烦，因为要按阶层一个一个往下传。 这个时候就要用到 Provide & Inject 父组件只需要 Provide 数据，而子组件只需要 Inject 数据 2. 使用 const app = Vue.createApp({}) // 父组件 app.component('todo-list', { data() { return { todos: ['Feed a cat', 'Buy ticket
provide / Inject浅析
老古懂的博客
04-13 1333
当我们需要从父组件向子组件传递数据时，我们使用 props。但是当面临一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。 对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。 官方模型展示 // 祖先组件 data(){ r
vue2使用provide和inject传递方法【provide、inject】
qq_22841387的博客
03-11 4353
provide和inject的使用让我们可以避免层层嵌套的$parent和$root调用，让代码更具灵活性和可维护性。但是，作为开发者，我们应根据具体情况选择适当的方案，避免滥用。简单父子组件通信： 还是建议使用props和emit。跨多层级的组件通信： 可以考虑使用provide和inject。状态管理： 当状态复杂时，考虑引入 Vuex 或其他状态管理工具。通过provide和inject，我们可以更灵活地进行组件通信，增强代码的可读性和可维护性。
Vue Provide / Inject 详细介绍（跨组件通信、响应式变化、版本变化）
高大志leo的博客
12-21 1万+
背景 通常，当我们需要从父组件向子组件传递数据时，我们使用props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。 对于这种情况，我们可以使用一对provide和inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据。 使用 假设有一个组件...
provide / inject 的简单使用
海带的博客
07-08 176
provide / inject 祖先组件向其所有后代组件注入依赖 组件 <template> <div> oindex <oIndex2></oIndex2> </div> </template> <script> import oIndex2 from "./oIndex2"; export default { components: { oIndex2 }, provi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值