vue3 provide与inject多级使用，以及数据监听

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量877 收藏
点赞数
分类专栏： vue3 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30893717/article/details/133384999
版权

记录一下使用provide和inject的传值，爷孙组件传值，以及在顶层组件如何监听数据的变化

1.普通传值使用

在传值页面引入provide

传递数据

在接收页面引入

接收数据

使用操作数据

2.传给孙子组件，并监听数据的变化

使用方法与上面类似，但是需要监听的话要使用object对象，不然监听不到数据的变化

在页面监听数据

你好，打工人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject： Array | { [key: string]: string | Symbol | Object }（一个字符串数组，或一个对象，对象的 key 是本地的绑定名） 要实现父子组件响应，父组件传递的数据类型必须是对象Object，子组件接收的数据类型必须是对象Object，其他数据类型都是不好使的 provide和inject响应的例子： 父
Vue3响应式provide、inject传值
明知山
12-16 4295
在父组件定义一个响应式的值 chat为要向子组件传递的值 updateChat为子组件修改chat的方法 const chat = ref(null) const updateChat = (item) => { console.log("重新拿到的值", item) chat.value = item } provide('chat', chat) provide('updateChat', updateChat) 子组件修改 const updateChat = inject('
Vue2：使用provide和inject时，无法获取到实时更新的数据
qq_37485170的博客
09-13 707
当vue文件中存在多级的父子组件传值、多个子组件或孙子级组件都要使用顶级或父级的数据时，使用provide 和 inject 组合出现一个问题，只是注入的初始值，并不能随时拿到数据源的实时更新。
vue的provide/inject实现响应式数据监听
热门推荐
yw00yw的博客
07-14 1万+
provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 无论多少层都会被子组建拿到 主要用在高阶组件 provide 选项应该是一个对象或返回一个对象的函数。 inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名 提示： provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 正常使用
vue3 父子组件传参provide inject ，响应式监听provide参数
潜心
03-16 4949
最近在学习vue3，联系中出现了一个场景，需要子父组件传参，根据需求我需要使用provide 和inject 这俩个函数，因为我的子父组件的层级是复杂的。开始想到了事件总线bus,然而— 官方文档写的很清楚： 所以我选择provide. 那么provide在传参的时候用inject来接收。很多的帖子已经有写，在vue3里面是函数式编程，这俩兄弟也成了函数式。 看下例子： 第一个参数是属性名，第二个是属性值，那问题来了，我想同时传入多个对象该怎么做，我通过查阅文章发现，大家的解决办法是再写一个provid
vue3利器-inject和provide
sinat_33342614的博客
03-04 2880
vue3正式发布到今天已经差不多过去了两年了，想必各位vue coder已经对Composition API/Options Api的优劣都有了自己的想法，本文则想从vue3提供的inject和provide来介绍自己的开发体验以及对vue3组件开发思路上的理解～
Vue3中的provide/inject/InjectionKey
SEKIRO_DJ的博客
03-31 6064
用provide和inject可以很方便的在父子组件之间通讯，即使是多层子组件，也能获取到父组件的值。但是会遇上类型上的问题，导致父组件传给子组件的方法无法调用，这时候我们可以使用vue3提供的InjectionKey解决这一问题。 在父组件中定义对象和函数 ，用provide暴露 const user = ref({ name: 'Karen', age: 20 }) provide('user', user) const setUser = ({ name, age }: { name: str
vue2 provide/inject watch 监控inject中值变化
冰雪为融的博客
09-21 1375
提供的值不是响应式的。这是Vue 2.x的设计，与Vue 3.x中的。提供的值保存在组件的响应式数据中，然后使用计算属性或。来监控这个响应式数据的变化。如果你希望在Vue 2.x中监控。提供的值是响应式的，可以直接被。注入的值默认情况下是不能被。在Vue 2.x中，使用。不同，Vue 3.x中的。inject使用的地方。
vue监听赋值值以及provide与inject
weixin_41143662的博客
11-20 7864
在子组件增加watch监听 watch: { 'oState': function (val) { this.getOrderList({orderStatus: this.getOrderState(this.oState), pageSize: 1}) } },
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
主要介绍了Vue.js中provide/inject实现响应式数据更新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue组件通信入门之Provide和Inject机制
10-15
主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue组件通信具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue3 -- computed 生命周期钩子 Provide函数 侦听数据的变化 watch script setup语法
聪明勇敢有力气的博客
10-29 1720
Vue3 -- computed 生命周期钩子 Provide函数 侦听数据的变化 watch script setup语法
Vue3 Composition API（三）——生命周期钩子、Provide函数 和 Inject函数、封装Hook案例、setup顶层编写方式
zep
03-02 1011
一、生命周期钩子 我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项，也可以替代 生命周期钩子。 那么setup中如何使用生命周期函数呢？ 可以使用直接导入的 onX 函数注册生命周期钩子； 二、Provide函数 和 Inject函数 事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的选项 。 我们可以通过 provide来提供数据：
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 672
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 352
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
vue的provide与inject
09-13
Vue的provide与inject是一种在组件之间共享数据的方式。通过在父组件中使用provide选项来定义要提供给子孙组件的数据，然后在子孙组件中使用inject选项来接收这些数据。 provide选项可以是一个对象或一个返回对象的函数。当provide选项是一个对象时，其属性和值会被提供给子孙组件。当provide选项是一个返回对象的函数时，函数会在每次重新渲染时都被调用，并且返回的对象会被提供给子孙组件。 在子孙组件中，可以使用inject选项来接收提供的数据。inject选项是一个数组，数组中的每一项都是一个要接收的属性名。这样，在子孙组件中就可以直接访问父组件提供的数据。 需要注意的是，provide与inject是非响应式的。也就是说，当提供的数据发生变化时，不会触发子孙组件的重新渲染。然而，如果提供的数据是一个可监听的对象，那么对象的属性仍然是可响应的，即当属性发生变化时，子孙组件会重新渲染。 总结起来，provide与inject是一种在Vue组件之间共享数据的方式，通过在父组件中提供数据，然后在子孙组件中接收数据实现。虽然provide与inject本身是非响应式的，但提供的数据如果是可监听的对象，那么其属性仍然是可响应的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值