vue组件深度传值provide、inject,值类型响应式的方法
文章目录
- 前言
- 一、provide,inject是什么?
- 二、使用步骤
- 1.祖先组件provide注入,并且传入的是整个this指向
- 2.后代组件接收
- 总结
前言
最近封装了一个上传,下载,查看附件的组件,其中有三层层级关系,需要深层次传值,一开始用props组件传值,但是要传两层感觉有点不优雅.后面上面查了vue的provide,inject方法,但是因为是传的值类型不能响应式,后面想到了一个方法可以响应式//
提示:以下是本篇文章正文内容,下面案例可供参考
一、provide,inject是什么?
通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。
对于这种情况,我们可以使用一对 provide 和 inject。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。
二、使用步骤
1.祖先组件provide注入,并且传入的是整个this指向
provide() {return {uploadId: this,};},
2.后代组件接收
代码如下(示例):
// 祖宗组件传值
inject: ['uploadId'],
总结
通过provide、inject 可以实现深度组件传值,不用繁琐的props传递很方便。普通值类型想要后代组件可以随时响应变化可以直接将父组件整个this对象传过去,祖先组件的值变化了后代的值也会跟着变化。
vue组件深度传值provide、inject,值类型响应式的方法相关推荐
- vue跨组件之间传值Provide/Inject
官网传送门:inject Vue2.2.0+ # 背景 关于Vue组件的通讯方式相信大家能倒背如流 父子组件:通过prop,$emit,[$root,$parent,$children] 非父子 ...
- Vue 组件化通信 provide inject ,dispatch ,boardcast
入门 作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了 <template><div id="app">< ...
- Vue组件通讯方式 provide/inject 介绍以及使用场景
文章目录 vue的通讯方式 provide / inject的缺点 使用办法 代码案例展示一(provide字符串) 代码案例展示二(provide返回一个方法,并且方法返回字符串) vue的通讯方式 ...
- 浅析provide/inject用法、响应式、全局传递
前言 Vue的父子间传值 : props 爷孙或者更深嵌套的组件间传值: provide/inject 更复杂的结构:vuex provide/inject 提供/注入 provide 一个对象或返回 ...
- VUE3组件 (4) 关于 Provide Inject 依赖注入
前言 以下代码和内容的使用都是在setup中,未使用TS. <script setup> </script> VUE3组件 (1) 关于defineProps() VUE3组件 ...
- vue组件间传值的六种方法
一. vue组件间传值 1. 父组件向子组件进行传值props 父组件代码: <template><div>父组件:<input type="text" ...
- vue组件之间传值方式方法---实战面试篇
vue组件之间传值方式方法 vue组件传值 vue组件化 什么是组件化? vue组件通讯 父组件向子组件传值 子组件向父组件传值 兄弟组件传值 总结 vue组件传值 最近准备面试跳槽.说到前端面试,有 ...
- 深入理解Vue 组件之间传值
一.父组件向子组件传递数据 在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...
- java socket中属性详解_前端开发:关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
最新文章
- Python 网络服务相关 杂记
- 面试官本拿求素数搞我,但被我优雅的“回击“了(素数筛)
- kafka安装、配置、启动、常用命令及shell启动脚本编写
- boost::safe_numerics模块实现检测到错误表达式评估的测试程序
- Fedora 21 中添加及更新源的命令
- 数据库的增删改查和使用流程
- Express-静态资源-路由-ajax-session
- sql server一个查询语句引发的死锁
- StringBuffer、StringBuilder、冒泡与选择排序、二分查找、基本数据类型包装类_DAY13...
- [转载]在iTOP-4412开发板上调试helloworld应用
- 无法打开包括文件: “Eigen/Dense”【CMakeLists 解决方案】
- pythonobject转int_python – Pandas:将dtype’object’转换为int
- zblog修改上传服务器,zblog模板怎么上传?zblog模板怎么替换logo?zblog及zblog模板和插件...
- 活着的传奇——《DOOM启世录》摘录
- Python显示其他字体(韩语),通过安装字体来实现
- 导出Mysql数据库结构-word格式
- docker-compose up命令
- leveldb 详解
- R语言使用scale函数将向量数据或者dataframe指定数据列转换为Z分数(z-Scores、转化为规范化数据)
- linux命令--使用fsck修复文件系统
热门文章
- Laravel 速查表 Cache
- Qt小项目(二):调色器
- word如何拆分表格
- ChatGPT飙升苹果商店榜首,每周订阅需7.99美元,结果是个假的???
- 13.3nm粒径水溶性Cds/CdTe-PAA-P4VP/BSA的制备方法
- Arduino学习笔记:基本直流电机驱动
- IBM Cloud VPC网络与本地办公网络的互通
- 美术向技美入门课——庄懂的技术美术入门课(美术向)01
- Office 2016 Pro Plus \ Project 专业版 \ Visio 专业版 \ 64 位vol版本方便KMS小马oem
- Video-based Emotion Recognition Using Multi-dichotomy RNN-DNN