Vue父子组件传值（porvide+inject实现组件通信）

最新推荐文章于 2023-06-08 00:42:17 发布
最新推荐文章于 2023-06-08 00:42:17 发布
阅读量324 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45745641/article/details/120976418
版权

如果我们需要把父组件的值传递给子组件，而且子组件可能存在层层嵌套，那么就可以使用provide+inject的方法来实现组件之间的通信

这里是父组件，将getReportData 里的值传到子组件
在这里插入图片描述
这里是子组件，先用inject进行接收，然后通过computed传入这边的data，
最后再上面div中进行渲染，这样值就传过来了
在这里插入图片描述

小技巧：

如果我们需要传入的组件和值非常多，使用上面的方法时，就需要在每个组件都写这些代码，就会显得非常冗余，那么我们可以新建一个文件，将对数据输出和处理的方法进行封装，然后在页面进行引用。

这样在页面中只需要关心拿到的结果对数据进行渲染。
例：

  1. 新建一个名

最低0.47元/天 解锁文章
Beiyux
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 父子组件之间传递参数（provide/inject）
onlylele的博客
05-27 668
注意：provide和inject需要一起使用； 示例代码如下： 1. 父组件中：设置传递给子组件的内容； // 父组件 provide() { return { message: (data) => { return new Promise((resolve, reject) => { this.handleClickOptions('message', data, this.$refs.info.getCurrentInfo..
vue父子组件传值
upStar1的博客
03-01 2万+
记录一下项目中遇到的问题。 因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。 因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件） ......
vue中provide和inject用法 实现父子通信
Kimser
07-20 606
一、概念解析 成对出现：provide和inject是成对出现的 作用：用于父组件向子孙组件传递数据 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据 二、代码解析 或者 另外一种理解： provider/inject...
Vue中父子组件传值的多种方式
热门推荐
qq_41965819的博客
04-08 3万+
vue中父子组件传值 vue中的父子组件传值，值得注意的是要遵守单向数据流原则。所谓单向数据流原则，简单的说就是父组件的数据可以传递给子组件，子组件也可以正常获取并使用由父组件传过来的数据；但是，子组件中不能直接修改父组件传过来的数据，必须要向父组件传递一个事件来父组件需要修改数据，即通过子组件的操作，在父组件中修改数据；这就是单项数据流。 废话不多说，先看演示： 这里可以看到我在父组件中定义了一个msg属性，子组件也获取到msg的值显示到input中，并通过修改子组件中input中的value值，实
vue父子组件传参的几种方式
秋来九月八
01-05 2万+
如果你的父子组件之间在不同的路由中，你可以使用路由参数来传递数据。在父组件中触发事件，而子组件监听事件以接收数据。你可以在父组件中使用 $emit 发送自定义事件，然后在子组件中监听该事件来传递数据。子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用。父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。在父组件和子组件中都可以访问和修改 Vuex 存储的数据。在发送事件的组件中使用 $emit 来触发事件。在接收事件的组件中使用 $on 来监听事件。
Vue父子组件传值的一些坑
10-14
本文将深入探讨Vue父子组件传值时可能遇到的问题，以及如何解决这些问题，同时还会涉及到JavaScript中的深拷贝和浅拷贝概念。 1. 问题描述： 在Vue中，当你从父组件向子组件传递一个对象时，如果子组件直接修改了这...
vue父子组件传值案例
04-26
在这个“vue父子组件传值案例”中，我们将深入探讨Vue 2.x版本中的父子组件通信机制，包括父组件如何向子组件传递数据以及子组件如何向父组件发送消息。 一、父组件向子组件传值 在Vue中，父组件向子组件传递数据...
Vue组件通信中非父子组件传值知识点总结
10-15
在Vue.js框架中，组件通信是一项关键能力，它允许组件之间相互协作，构建复杂的用户界面。在组件通信中，常见的有父子组件之间的通信，而本文将重点探讨非父子组件之间的值传递，即如何在没有直接关系的组件之间共享...
Vue父子模版传值及组件传值的三种方法
08-28
主要介绍了Vue父子模版传值及组件传值的三种方法,需要的朋友可以参考下
【Vue2】父子组件传参 && 孙子调用爷爷的方法 provide inject
weixin_47375144的博客
06-08 3144
这里切记：通过props接受到的值是不能改变的，如果要改变只能重新再子组件定义，然后通过watch将父组件的值传给该定义好的属性，即可渲染。若inject:[‘方法名报错’]，则可更改为。provide抛出去。
Vue 组件传值，祖先组件向子组件传值，provide和inject
lylengleng的博客
04-26 378
引用。
ruoyi-vue-pro部署文档
一起coding，一起嗨。
02-22 1万+
ruoyi-vue-pro介绍: 前端采用vue-element-admin，正在支持 Vue 3 + ElementUI Plus 最新方案。 后端采用 Spring Boot、MySQL + MyBatis Plus、Redis + Redisson。 权限认证使用 Spring Security & Token & Redis，支持多终端、多种用户的认证系统。 支持加载动态权限菜单，按钮级别权限控制，本地缓存提升性能。 工作流使用 Activiti ，支持动态表单、在线设..
vue父子组件传值的方法
YoungMan_09的博客
03-12 1万+
父子组件传值
vue父子组件传值：父传子、子传父
upStar1的博客
08-30 6196
1.父组件引入子组件 2.父组件给子组件传值 3.子组件接收父组件传来的值 4.子组件将值传给父组件 6.父组件直接调用子组件的方法 5.父组件接收子组件传来的值
Ant Design Vue Pro 项目实战-项目初始化（一）
终极冥帝
02-23 9882
写在前面小说网 https://www.laoyao.org 时间真快，转眼又是新的一年。随着前后端技术的不断更新迭代，尤其是前端，在目前前后端分离开发模式这样的一个大环境下，交互性、兼容性等传统的开发模式已经显得有些吃力。之前一直用的是react，随着后面钩子的加入更让人爱不释手，但是整个团队需要更新技术，这里选择了更容易上手的Vue（这里的容易上手并没有歧义，指的是更容易...
vue 父子组件传值的三种方式
weixin_46166949的博客
04-24 1504
子获取父 1、prop。 2、this.$parent.*** 父获取子 this.refs.∗∗∗this.refs.*** this.refs.∗∗∗this.refs.*** 相当于子组件的this； this.$parent.***相当于父组件的this
Vue3 父子组件传值 provide、inject
专注前端技术，包括Web端、移动端、小程序、APP
07-09 1098
provide、inject只适用于父子组件或祖孙组件等之间进行传值，在兄弟组件之间不适用。 首先，需在父级组件中使用provide： <script> import { provide } from 'vue' export default { setup(){ provide('num',123) } } </script> 接着，在子组件中使用inject： <script> import { inject } from 'vue'; export
vue中的provide与inject详解与使用
qq_42157868的博客
04-07 1301
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。 1.provide与inject一般都是成对使用，在父组件中使用provide分发状态 在父组件任意隔代组件中能使用inject接收porvide共享的值 例子 父组件 <script> export default { data(){ return { parentVal:'父组件的值' }, //使用provide劫持父组件的值 provide:{ val:this,
Vue provide 和 inject 深层父子组件通信
海胆的博客
07-30 170
父组件通过 provide选项提供数据 子组件通过 inject选项 注入数据 可以跨越层级传递 注：provide选项 要访问组件实例data，需要将 provide 转换为返回对象的函数 默认情况下，provide/inject 绑定并不是响应式的。 ...
vue 父子组件传值
最新发布
04-26
Vue是一种流行的JavaScript框架，用于构建用户界面。在Vue中，父子组件之间传递数据是一种常见的需求。以下是一种常用的方法来实现父子组件之间的数据传递： ...以上是Vue中实现父子组件之间传递数据的两种常用方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beiyux

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值