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

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

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

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

小技巧:

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

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

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

在这里插入图片描述

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

在这里插入图片描述

相关文章
|
6天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
6天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
5天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
5天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
JavaScript 前端开发
前端-vue基础63-非父子组件传值
前端-vue基础63-非父子组件传值
92 0
前端-vue基础63-非父子组件传值
|
JavaScript
Vue父子组件传值通讯,超详细注释
Vue父子组件传值通讯,超详细注释
239 0
|
JavaScript 开发工具 git
23、vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热。 Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1、父组件向子组件传值 (1)第一个就是要明白怎么在父页面中向子组件中传值? 你可以给子组件传入一个静态的值: 图片来自vue官网 但我们一般都是需要传动态的值,所以需要v-bind绑定: 图片来自vue官网 当然,你传的值可以是数字、对象、数组等等,参见vue官网。
1149 0
|
JavaScript
初识 Vue(15)---(父子组件传值)
父子组件传值 示例:父组件向子组件传递数据 在 Vue 中 ,父组件向子组件传值,通过属性的方式来进行传递 父子组件传值 var counter ={ p...
1222 0