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 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 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中上传大体积文件时需要的设置
2006/10/09 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python将时分秒转换成秒的实例
2019/12/07 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
python 获取字典键值对的实现
2020/11/12 Python
实习教师个人的自我评价
2013/11/08 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
党建目标管理责任书
2014/07/25 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2014年党建工作总结
2014/11/11 职场文书
中秋节寄语2015
2015/03/24 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
python基础之文件操作
2021/10/24 Python