Vue父子组件传值(porvide+inject实现组件通信)

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

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

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

小技巧:

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

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

  1. 新建一个名为commonDataMixin.js的文件,在里面对数据进行输出和处理

在这里插入图片描述

  1. 直接在子组件页面进行引用,同样可以将值渲染在页面上,这样代码就非常的简洁。

在这里插入图片描述

相关文章
|
4月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
371 2
|
3月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
339 137
|
6月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
499 1
|
6月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
316 0
|
JavaScript 前端开发
前端-vue基础63-非父子组件传值
前端-vue基础63-非父子组件传值
187 0
前端-vue基础63-非父子组件传值
|
JavaScript
Vue父子组件传值通讯,超详细注释
Vue父子组件传值通讯,超详细注释
304 0
|
JavaScript 开发工具 git
23、vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热。 Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1、父组件向子组件传值 (1)第一个就是要明白怎么在父页面中向子组件中传值? 你可以给子组件传入一个静态的值: 图片来自vue官网 但我们一般都是需要传动态的值,所以需要v-bind绑定: 图片来自vue官网 当然,你传的值可以是数字、对象、数组等等,参见vue官网。
1225 0
|
JavaScript
初识 Vue(15)---(父子组件传值)
父子组件传值 示例:父组件向子组件传递数据 在 Vue 中 ,父组件向子组件传值,通过属性的方式来进行传递 父子组件传值 var counter ={ p...
1318 0