react和vue的组件通信

最新推荐文章于 2023-10-07 09:59:29 发布
最新推荐文章于 2023-10-07 09:59:29 发布
阅读量636 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26327971/article/details/105167265
版权
本文探讨了Vue和React中组件通信的不同方法，包括属性传递、发布订阅、Vuex、React.createContext、Redux等。在Vue中，通常使用属性、EventBus和Vuex进行父子及跨级组件通信，而React则依赖属性、回调函数和Context API。Vue的slot插槽允许任意组件间的特定信息传递，而React推荐使用公共状态管理库如Redux来处理复杂通信。对于持久化存储，文中提到了localstorage、cookie和session的选择和应用场景。
摘要由CSDN通过智能技术生成

组件通信

vue

  • 属性传递
  • 发布订阅（EventBus）:$on / $emit
  • Provied / inject
  • slot
  • $parent / $children
  • vuex
    react
  • 属性
  • 发布订阅
  • React.createContext
  • redux / react-redux / mobix / dva

通过属性传递，属性传递有什么问题：只能父传给子，子不能传给父

  • 实现子能传给父，子能改父（vue属性+发布订阅）：vue通过发布订阅实现子改父：在父亲里订阅一个方法，在子里通过$emit触发执行，触发执行时能把儿子的东西传给父亲
  • react通过传回调函数，：父传子 通过属性
    子改父：父亲把自己的方法当做属性传给儿子的时候，儿子拿到父亲的方法，在儿子里把方法执行了
    react需自己实现发布订阅，vue自带 o n / on/
最低0.47元/天 解锁文章
ellieokokok
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 组件通信
qq_36418624的博客
04-14 174
React中的组件通信共可以分为5类： 父子组件通信 子父组件通信 非父子组件通信 跨组件通信 多组件状态共享 父组件与子组件通信 父子组件通信：无论父组件传递的是props还是state，子组件都是通过props接收 父组件将自己的状态传递给子组件，子组件当作属性来接收，当父组件更改自己状态 的时候，子组件接收到的属性就会发生改变 父组件利用ref对子组件做标记，通过调用子组件的方法更...
React组件间通信（常用方式，简单易用）
高大志leo的博客
10-27 4517
React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，结合实例，通俗易懂，建议收藏。 一、父子组件通信 原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。 首先，先创建一个父组件Parent.js跟子组件Children.js，二者的关系为直接父子关系。 Parent.js父组件如下，给父组件一个默认状态state，引入子组件，通过在子组件加上toChildren={this.state.msg}，该处即为向子组件传..
第四篇：数据是如何在 React 组件之间流动的？（上）
越陌度阡
10-20 658
通过前面 3 个课时的学习，相信你已经对 React 生命周期相关的“Why”“What”和“How”有了系统的理解和掌握。当我们谈论生命周期时，其实谈论的是组件的“内心世界”。但组件和人是一样的，它不仅需要拥有丰富的内心世界，还应该建立健全的“人际关系”，要学会沟通和表达。 从本课时开始，我们将一起探索蕴含在 React 组件中的“沟通与表达”的艺术。我们知道，React 的核心特征是“数据驱动视图”，这个特征在业内有一个非常有名的函数式来表达： 这个表达式有很多的版本，一些版本会把入参里的 da
react梳理之组件通信(传值)
小张的博客
03-23 3129
react组件的通信属于开发基础知识,今天来梳理一下,当然rudex还按老规矩排除在外,如同上篇文章的hooks一样,单独梳理 一.react组件常用的通信情景 父子组件通信 兄弟组件通信(非父子组件) 1.父子组件通信 props传值 props传值算是react中最基本的传值方式,如果使用或者学习过vue的会了解到,props也是vue的父子组件基本的传值方式,通过父组件使用子组件的时候绑定值,在子组件中接收props值来完成,props是一个对象,对象内接收了父组件通过键值对方式传递的值,在.
Vue2、3组件通信、双向绑定、插槽slot、内置指令
luemeon的博客
07-18 2836
除了传递基本的值之外，还可以传递其他类型，比如对象或数组。语法糖:value默认情况下，v-model会使用子组件的value属性作为 prop 名，使用input事件来触发更新。适应不同的数据源，与其他组件集成不会产生命名冲突。比起value更具有语义，使其他开发者更容易理解组件的预期用法和行为。props: {// 使用自定义的 prop 名 customProp},// 通过 model 选项自定义 v-model 的 prop 和事件名。
react子组件中触发父组件的方法,类似vue中的$emit
九段刀客的博客
12-26 864
【代码】react子组件中触发父组件的方法,类似vue中的$emit。
React为 Vue 引入容器组件和展示组件的教程详解
08-27
React 为 Vue 引入容器组件和展示组件的教程详解 React 的容器组件和展示组件概念在 Vue 中的应用是一种非常有用的设计模式。这种模式可以帮助我们更好地组织组件，提高代码的可复用性和维护性。 为什么要使用容器...
将React组件转换为Vue组件
08-08
在组件通信方面，React可以使用Context API，Vue有提供props、自定义事件和Vuex。 7. **渲染虚拟DOM** 两框架都使用虚拟DOM来优化性能，React的`render`方法生成虚拟DOM树，Vue则有其自己的编译器将模板转换为渲染...
Vue组件通信入门之Provide和Inject机制
10-15
### Vue组件通信入门之Provide和Inject机制 #### 引言 在Vue.js中，组件间的通信至关重要，尤其当涉及到复杂的嵌套组件结构时更是如此。通常情况下，父组件可以通过子组件的`props`属性直接传递数据给子组件，但在...
Vue和React组件之间的传值方式详解
01-19
同时，还有一些其他进行父子组件通信的方式，通过$parent和$children获取组件的父或者子组件的实例，之后通过实例对象去修改组件的属性。在表单控件中，使用v-model实现了双向数据绑定，其实这里v
React组件通信总结
Web_boom的博客
06-11 359
react组件通信无非就是这几种情况：父子组件通信、爷孙/祖孙之间通信、兄弟组件通信、其他关系组件通信。因为 React 的设计实际上就是传递 即可。那么场景体现在容器组件与展示组件之间，通过 传递 ，让展示组件受控。可以在子组件标签上定义属性将父组件的值传进去，在子组件可以使用props接收传进来的属性值。示例： 子传父 有两种方式可以支持子传父，可以使用回调函数与实例函数。1、使用回调函数在父组件内定义一个回调函数，将这个函数绑定在子组件上通过props传入子组件，当子组件中是事件或者什么时机需要向
Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)
大灰狼的小绵羊哥哥的博客
05-30 654
简介 Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。 今天我们通过对比的方式来学习Vue和React的组件传值这一部分。 本文首先讲述Vue2、Vue3、React的组件传值方式，然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结了Vue和React在组件传值这部分的相同点和不同点。 希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。 Vue2 Vue2 组件通信共有12种 props $emit /
React中组件之间通信（父子组件、跨级组件、无关组件）
Celester_best的博客
08-07 1569
React中组件之间通信，包括父子组件、跨级组件、非父子非跨级的无关组件。 通信方式有props、context、EventEmitter
react学习笔记
hkduan的博客
06-19 430
react学习笔记 @[TOC]react hook 1.引入useState import React, { useState } from ‘react’ 2.//reack hook中的useState实现函数组件状态管理 //userState第一个参数是当前状态值，第二个参数是函数。类似于setState function App() { // 1.声明对象类型的状态 let [val, setVal] = useState({ vala: 0, valb: 1,
react-组件通信(redux)
最新发布
软工二班秦同学的博客
10-07 182
react本身没有提供相关的仓库管理插件，react社区非常庞大，社区提供了一个仓库管理插件`redux`，相当于vuex可以对数据进行管理。
React之组件间通信
zhanghuaiwei
07-26 572
React组件直接的通信。包括父子组件、子父组件、其他等
react 数据流
HI_YIDan的博客
07-29 173
单向数据流 当前组件的 state 以 props 的形式流动时，只能流向组件树中比自己层级更低的组件,父-子通信、子-父通信和兄弟组件通信。 “发布-订阅”模式驱动数据流 使用发布-订阅模式的优点在于：监听事件的位置和触发事件的位置是不受限的，就算相隔十万八千里，只要它们在同一个上下文里，就能够彼此感知 事件的监听（订阅）和事件的触发 on()：负责注册事件的监听器，指定事件触发时的回调函数 emit()：负责触发事件，可以通过传参使其在触发的时候携带数据 off()：负责监听器的删除.
React Native使用 DeviceEventEmitter发送通知emit和监听接收addListener的用法
weixin_34242819的博客
11-15 1155
js 向 js 发送数据 DeviceEventEmitter.emit('自定义名称',发送数据); 例：边看边买退出登录之后，我的淘宝和详情页的钱包数据应该改变。这时，我们可以在退出登录请求返回退出登录成功时发送一个通知 　　　userInfo.userLogout((success)=>{ if(success){ ...
vue和react组件通信区别
05-25
Vue 和 React 都是现代前端框架，它们都使用组件化编程的方式来构建复杂的前端应用程序，但是它们的组件通信方式略有不同。 在 Vue 中，组件通信主要有两种方式： 1. 父子组件通信：通过 props 向下传递数据，子组件通过 $emit 向父组件发送事件。 2. 兄弟组件通信：使用一个空的 Vue 实例作为中央事件总线（event bus），所有组件都可以通过它来通信。 而在 React 中，组件通信主要有两种方式： 1. 父子组件通信：通过 props 向下传递数据，子组件通过回调函数向父组件传递数据。 2. 兄弟组件通信：使用 Context API 或者 Redux 状态管理库来共享状态。 总的来说，Vue 更加方便和简单地进行组件间通信，因为它提供了内置的事件机制和响应式数据绑定，而 React 的组件通信需要借助一些额外的库来实现。但是，React 的状态管理和组件通信可以更加灵活和可控，因为它可以使用 Redux 等状态管理库来进行组件通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值