react 非父子组件传参方式
1.通过父组件当中间人方式,子传父再传子
2.通过发布订阅模式
obj={
list:[],
sub(callback){
list.push(callback)
},
pub(){
list.foreach((callback)=>{
callback()
})
}
}
obj.sub(()=>{
console.log(''')
})
obj.pub()
先发布后订阅
3.context通讯
父组件通过包裹
ThemeContext= react.createContext()
<ThemeContext.Provider value={{
theme: themes[themeIndex],
changeTheme: this.changeTheme
}}>
子组件
<ThemeContext.Consumer>
{({theme, changeTheme}) => <button onClick={changeTheme} style={{background: theme.background, color: theme.color}}> It's a button. }
</ThemeContext.Consumer>
react 非父子组件传参方式的更多相关文章
- React(7) --react父子组件传参
react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React f ...
- Angular 项目开发中父子组件传参
在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...
- vue 父子组件传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- vue 监听父子组件传参,对象数据变化
watch:{ 组件传参的字段 :{ handler (newV, oldV){ 这里打印 newV, oldV 就可以看到数据变化了 } , immediate: true, // 重点 deep: ...
- vue 动态组件、父子组件传参
1.vue中的自定义属性并获得属性的值 自定义属性::data-id语法为 :data-属性 获取属性的值:ev.target.dataset.id 2.vue父子组件传值 3.动态组件使用
- vue指令,实例成员,父子组件传参
v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...
- React编写input组件传参共用onChange
之前写页面上的input比较少,所以没有单提出来一个组件,今天研究了下input组件,但共用一个onChange的问题卡了一会儿,查了下发现几个比较好的方法,分享下: 方法一 Input组件 let ...
- Vue父子组件传参新写法
以前我在写接受自定义事件是这么写的: 后来我在官网看到这样一种说法:可以用$event代替emit事件传入的参数,于是我写成了这样: 直到昨天Vetur更新,给我报了这么一个错误: 报错原因:事件不能 ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
随机推荐
- 关于CMDB
关于CMDB: CMDB运维管理平台是由CMDB开发团队,针对目前服务器运维.监控,批量管理提出的一个开源. 易用.实用的跨平台服务器运维管理平台. 统筹来说cmdb就是将已有的规则化运维技术规则到运 ...
- Linux-jar操作脚本
service.sh 使用说明: ./service.sh start ./service.sh stop #!/bin/bash #这里可替换为你自己的执行程序,其他代码无需更改 APP_NAME= ...
- Java设计模式——装饰器模式(Decorator)
今天上课讲了java设计模式中的装饰器模式--Decorator,由于早上起的很早,肚子也很饿,知识点本身也晦涩难懂,听的云里雾里的,所以在课下对这块的知识做出一些总结. 定义 装饰器模式又名包装(W ...
- 03java基础(二)java面向对象
目录 类和对象的基本使用 基础概念 类的初始化 用new关键字创建对象 创建对象的内存分析 OOP的三大特征 类的封装 类的继承 继承的基础使用 继承基本概念 extends关键字的基本使用 supe ...
- pr 如何给视频进行加速,慢速处理
pr 如何给视频进行加速,慢速处理 1.首先导入视频素材,并将其拖拽到时间轴上 2.然后右键视频素材,点击"速度/持续时间" 3.然后会弹出这个界面,改变速度值,就可以更改视频速度 ...
- 51电子-STC89C51开发板:安装KEIL
全部内容,请点击: 51电子-STC89C51开发板:<目录> --------------------------- 正文开始 --------------------------- ...
- git(后悔药)版本回退
版本回退 查看提交记录 git log remotes/origin/test --pretty=oneline (建议获取远程日志记录,防止本地没有更新到最新版本) 如果本地是最新版本可以使用:gi ...
- linux中的环境变量/etc/profile /etc/bashrc ~/.bash_profile ~/.bashrc
来源:https://blog.csdn.net/zzhongcy/article/details/108663751 /etc/profile ============ 此文件为系统的每个用户设置环 ...
- ubuntu20.04系统中扩展swap分区
1.首先停止/swapfile #swapon /swapfile 2.删除以前的/swapfile #rm -rf swapfile 3.创建新的/swapfile(以2G为例) #dd if=/d ...
- 解决在高分屏电脑上的vmware,linux系统的显示比例不正确的问题
除了在虚拟机系统内改变显示比例为200%的方法,还有另一种方法: 编辑虚拟机设置--硬件--显示器--指定监视器设置,选择任意监视器的最大分辨率为1920x1080(或者比例保持不变的其他分辨率,例如 ...