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 相关文章推荐
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
js中apply和call的理解与使用方法
Nov 27 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/12/12 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php搜索文件程序分享
2015/10/30 PHP
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python七夕浪漫表白源码
2019/04/05 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
如何进行Linux分区优化
2013/02/12 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
党委班子剖析材料
2014/08/21 职场文书
青年志愿者活动感想
2015/08/07 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
golang 实用库gotable的具体使用
2021/07/01 Golang
Python如何使用循环结构和分支结构
2022/04/13 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers