vue3中的provide和inject

最新推荐文章于 2024-08-19 09:30:30 发布
最新推荐文章于 2024-08-19 09:30:30 发布
阅读量2.6w 收藏 56
点赞数 21
分类专栏： vue面试 文章标签： vue.js 前端 javascript provide inject
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47450807/article/details/122925805
版权

在vue2中我们已经使用过provide和inject来实现祖孙组件之间的数据传递，但是在vue3中由于我们使用setup，此时我们应该如何去使用provide和inject函数呢？
在vue中帮我们提供了provide和inject的函数，我们可以直接在setup函数中使用即可。
一、provide和inject的基本使用
在这里插入图片描述
如上图所示，此时我们将一个普通对象进行传递，然后在Home组件中通过inject函数来接收。
我们也可以通过ref和reactive进行传递。
在这里插入图片描述
在这里插入图片描述
上面代码我们可以看出在Home.vue文件中可以更改App.vue通过provide传递过去的数据，但是在一些情况下，我们是不允许的，此时我们可以采用readonly来进行设置。
在这里插入图片描述
如果我们确实希望改变父组件的数据，此时我们可以在父组件中设置方法，通过provide将该方法传递给子组件，保证数据是数据提供的位置进行修改。
在这里插入图片描述

卖菜的小白
关注
专栏目录
vue2中provide/inject的使用
qq_37635012的博客
05-19 1397
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。// 祖先组件 data() {return {obj : {name : "小明" } } } , provide : function() {return {// 传递一个对象 obj : this . obj } } , // 孙子组件 inject : [ 'obj' ] , computed : {
vue3版本provide、inject用法
weixin_46138124的博客
01-12 2万+
在父组件操作 <template> <div id="nav"> <h3>{{title}}</h3> <button @click="setTitle">同时改变title</button> </div> </template> <script> import { ref, provide } from 'vue' export default { setup() {
Vue3封装知识点（三）依赖注入：provide和inject详细介绍
热门推荐
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-19 2万+
在vue3中project和inject详细使用介绍，使用技巧和原理，简单易懂！
Vue 3 中 provide 和 inject 高级用法与最佳实践
weixin_41978174的博客
08-19 1049
为 Vue 3 的组件开发提供了强大的灵活性和数据共享能力。是一对强大的功能，用于实现组件之间的跨层级数据传递。在一个具有多层级组件的应用中，父组件提供当前的主题配置，子孙组件根据注入的主题数据来调整样式。当提供的是普通值时，修改值不会触发子孙组件的更新。为提供和注入的数据使用清晰、有意义的名称，以提高代码的可读性和可维护性。跨越了组件层次，在测试时需要特别注意模拟和断言数据的传递和使用。父组件提供当前的语言设置，子孙组件根据语言获取对应的文本内容。的值发生变化时，所有注入了该数据的子孙组件都会自动更新。
vue 3 学习笔记 (八)——provide 和 inject 用法及原理
前端人的博客
11-26 4252
在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。 像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。 一、Vue2 的 provide / inject
Vue3系列--provide与inject
霖hero
06-12 907
在Vue3项目开发的过程中，会创建很多组件，那么避免不了组件之间的通信，在父子组件通信我们可以使用defineProps、defineEmits、defineExpose和Emit方法完成通信，在使用这些方法的前提是需要引用对应的组件。在不引用组件的前提下，顶层组件向底层组件提供数据或方法，如下图：这时我们可以使用provide和inject使顶层组件向底层组件提供数据和方法。
Vue3全局组件通信之provide / inject
老电影故事的博客
03-13 5130
顾名思义，爷孙组件是比 父子组件通信 要更深层次的引用关系（也有称之为 “隔代组件”）：C组件引入到B组件里，B组件引入到A组件里渲染，此时A是C的爷爷级别（可能还有更多层级关系），如果你用 props ，只能一级一级传递下去，那就太繁琐了，因此我们需要更直接的通信方式。😜😜😜因为上下级的关系的一致性，爷孙组件通信的方案也适用于 父子组件通信 ，只需要把爷孙关系换成父子关系即可。
【JavaScript源代码】vue3中provide和inject的使用.docx
12-29
vue3中provide和inject的使用 　1.provide 和 inject 的讲解　provide和inject可以实现嵌套组件之间进行传递数据。 这两个函数都是在setup函数中使用的。 父级组件使用provide向下进行传递数据； 子级组件使用inject...
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject...
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
Vue.js的`provide/inject`选项提供了一种在组件祖先和子孙之间传递数据的方法，它跳过了中间组件的层级，这对于非直接父子关系的组件通信非常有用。然而，要注意的是，这种通信方式并不是响应式的，这意味着如果你...
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3知识点：provide 与 inject
刘大猫
07-19 1246
vue3知识点：provide 与 inject
vue3中provide和inject详解
Br不二
03-26 1025
在Vue 3中，provide和inject是一对特殊的方法，用于在父组件中提供数据或方法，并在子组件中注入这些数据或方法这种。机制使得跨组件通信变得更加便捷，特别是在处理深层嵌套的组件结构时
vue3的provide与inject
前端程序猿的博客
12-29 284
作用：实现祖与后代组件间通信 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据 具体写法： //祖组件中： setup(){ ...... let car = reactive({name:'奔驰',price:'40万'}) provide('car',car) ...... } //后代组件中： setup(props,context){ ...... const car = inject('ca.
Vue3的provide和inject
richest_qi的博客
03-20 384
provide和inject用于实现祖组件与其后代组件（如子组件、孙组件、重孙组件等等）间的通信，有点像Vue2时的事件总线。 具体看个例子吧。项目目录如下。 main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') 祖组件App.vue <template> <div class="app"> <h2>
vue3--provide和inject
qq_68442164的博客
05-14 490
在调用provide函数时，第二个参数设置为。底层组件调用方法修改顶层组件中的数据。顶层组件可以向底层组件传递方法，顶层组件向任意的底层组件。二.跨层传递响应式数据。一.跨层传递普通数据。provide函数提供。inject函数获取。
vue3中的provide/inject(提供/注入)
Sapling
09-24 4619
在说先说一下。通常我们从父组件向子组件传递数据时，会用到props。对于只需要传递一层或二层时还行，假如需要传递多层嵌套的组件，此时一级一级传递数据就会很繁琐，不利于编码，因此产生了，从而解决此类问题。有了不用一级一级传递，只要是父组件提供了某个数据，隔代组件就能直接获取都数据，从而很方便。
vue3 provide,inject
qq_44540152的博客
11-30 608
当跨级传递数据,用传统的props需要逐层传递太过于繁琐,vue3中使用provide,inject很方便的解决这个问题 第一级组件中: <script> import child from "./components/child.vue"; import { reactive,provide,inject} from 'vue' export default { components:{ child, }, setup() { let person = reacti
vue2中provide和inject的使用
最新发布
09-10
在Vue 2中，`provide` 和 `inject` 是一对选项，允许一个祖先组件向其所有子孙后代注入一个依赖，而不论组件层次有多深，并在起上下游关系成立的时间里始终生效。这个特性可以用于封装插件或组件库。 - `provide` 选项应该是一个对象或者是一个返回对象的函数。在对象中你可以提供多个属性，这些属性在组件树中的后代组件里可以通过 `inject` 选项来接收。 - `inject` 选项是一个数组，包含字符串或对象。字符串作为键名，对应提供方 `provide` 选项中的属性名。 这里是一个简单的例子： ```javascript // 祖先组件 export default { data() { return { message: 'Hello!' }; }, provide() { // 使用对象形式提供 'message' return { user: this.message }; } }; // 后代组件 export default { inject: ['user'], created() { console.log(this.user); // 将会输出: 'Hello!' } }; ``` 在这个例子中，祖先组件提供了一个名为 `user` 的依赖，后代组件通过声明 `inject: ['user']` 来注入这个依赖。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值