Vue和React组件之间的传值方式详解


Posted in Javascript onJanuary 31, 2019

在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些?

组件间的传值方式

组件的传值场景无外乎以下几种:

  • 父子之间
  • 兄弟之间
  • 多层级之间(孙子祖父或者更多)
  • 任意组件之间

父子之间

Vue

Vue是基于单项数据流设计的框架,但是提供了一些的语法,指令去实现一些操作

  • 父->子:通过props进行传递数据给子组件
  • 子->父:通过emit向父组件传值

同时,还有一些其他进行父子组件通信的方式,通过$parent和$children获取组件的父或者子组件的实例,之后通过实例对象去修改组件的属性。在表单控件中,使用v-model实现了双向数据绑定,其实这里v-model是一个语法糖,内部实现还是监听了表单控件的change事件,然后将数据传递给组件修改数据,从而实现了双向数据绑定。

React

  • 父->子:通过props将数据传递给子组件
  • 子->父:通过父组件向子组件传递函数,然后子组件中调用这些函数,利用回调函数实现数据传递

兄弟之间

Vue

在Vue中,可以通过查找父组件下的子组件实例,然后进行组件进行通信。如this.$parent.$children,在$children中,可以通过组件的name找到要通信的组件,进而进行通信。

React

在React中,需要现将数据传递给父组件,然后父组件再传递给兄弟组件。

多层级组件

Vue

在多层级的组件中,当然可以通过不断的获取$parent找到需要传递的祖先级组件,然后进行通信,但是这样繁琐易错,并不推荐。Vue在2.2.0 新增提供了provide/inject的方式进行传递数据。即在祖先组件提供数据,在需要使用的组件中,注入数据,这样就可以在子组件中使用数据了。provide/inject文档

// 父级组件提供 'foo'
var Provider = {
 provide: {
  foo: 'bar'
 },
 // ...
}

// 子组件注入 'foo'
var Child = {
 inject: ['foo'],
 created () {
  console.log(this.foo) // => "bar"
 }
 // ...
}

React

在React中,提供了一个和Vue类似的处理多层级组件通信的方式——context,这里会提供一个生产者和一个消费者,会在父组件中生产数据,在子组件中消费数据。从使用上来说,只需要将子组件包裹在生产者的Provider中,在需要用到数据的子组件中,通过Consumer包裹,就可以拿到生产者的数据。context文档

// Theme context, default to light theme
const ThemeContext = React.createContext('light');

class App extends React.Component {
 render() {
  const {signedInUser, theme} = this.props;

  // App component that provides initial context values
  return (
   <ThemeContext.Provider value={theme}>
    <Layout />
   </ThemeContext.Provider>
  );
 }
}

function Layout() {
 return (
  <div>
   <Sidebar />
   <Content />
  </div>
 );
}

// A component may consume multiple contexts
function Content() {
 return (
  <ThemeContext.Consumer>
   {theme => (
     <ProfilePage theme={theme} />
   )}
  </ThemeContext.Consumer>
 );
}

任意组件之间

Vue

对于任意组件,简单的可以使用EventBus,对于更为复杂的建议使用Vuex。

React

简单的使用EventBus,复杂的使用Redux

总结

当然,组件间的传值是灵活的,可以有多种途径,父子组件同样可以使用EventBus,Vuex或者Redux,只是遵循框架开发者的建议,以及适应开发的比较好的实践而已。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 #Javascript
async/await优雅的错误处理方法总结
Jan 30 #Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 #Javascript
JavaScript之解构赋值的理解
Jan 30 #Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 #Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 #Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 #Javascript
You might like
php中文字母数字验证码实现代码
2008/04/25 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
accesskey 提交
2006/06/26 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python 统计字数的思路详解
2018/05/08 Python
详解python中的装饰器
2018/07/10 Python
详解Python中的type和object
2018/08/15 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
构建高效课堂实施方案
2014/03/13 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
社会实践心得体会范文
2016/01/14 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL