欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-08 23:39:11
在现代的三大框架中,其中两个vue和react框架,组件间传值方式有哪些? 组件间的传值方式 组件的传值场景无外乎以下几种: 父子之间 兄弟之间...

在现代的三大框架中,其中两个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的方式进行传递数据。即在祖先组件提供数据,在需要使用的组件中,注入数据,这样就可以在子组件中使用数据了。

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

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

react

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

// 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,只是遵循框架开发者的建议,以及适应开发的比较好的实践而已。

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