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

时间: 2019-02-02阅读: 917标签: 组件

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


组件间的传值方式

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

  1. 父子之间
  2. 兄弟之间
  3. 多层级之间(孙子祖父或者更多)
  4. 任意组件之间


父子之间

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

来自:https://segmentfault.com/a/1190000018070852


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1947

关闭

一个简单的slider滑块组件

要实现这样的效果我们有很多种方法,比如直接使用<input type=range>修改样式即可,也可用下面的这种方式修改样式。那如何以组件的形式生成一个简单的滑块呢?

Vue组件化开发

学习组件化开发,首先掌握组件化的开发思想,组件的注册方式,组件间的数据交互方式,组件插槽的用法,vue调式工具的用法,组件的方式来实现业务逻辑功能。组件化开发思想,组件注册,组件调式,组件间的数据交互,组件插槽

使用 Recompose 来构建高阶组件

在 Workpop 公司,我们不断使用不同的组件设计模式来迭代我们的产品,以适应瞬息万变的 React 生态系统。早些时候,我们从试用高阶组件设计模式(HOC)中尝到一点甜头。

Vue 中,如何将函数作为 props 传递给组件

Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗?

Vue组件、自定义属性、自定义事件

一个vue文件就是一个组件。组件将html标签/css样式/对应JS打包成一个整体,也可以理解钻进一个具有样式和特效的自定义标签。自定义属性、使用自定义属性

Vue父子组件传值(复杂数据类型的值)

vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean,当父组件值被修改时,子组件能够实时的作出改变。如果父子传值的类型是复杂数据类型(object,array)这种时

组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)

首先我们先说一下在自定义组件中使用v-model的必要条件,在自定义的组件中要有input(这里我们先不讨论单选复选框),在自定义组件的模板对象中要有props属性,且里面要含有一个value

Vue 开发者不可错过的五款开源扩展组件

自 2014 年正式对外发布以来,Vue 凭借着入门容易、资料丰富、框架功能完善等优势,成为国内许多前端开发者在众多 JavaScript 框架中的首选。Gitee 上这些优秀的开源 Vue 组件也侧面说明了 Vue 的生态在国内已经日臻成熟

开发一个高质量的前端组件,这些姿势一定要知道

NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。NPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是

Vue 中的无状态组件

状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了。简单的说,状态是一个包含应用程序使用的最新值的对象。但是,如果咱们从结构的、更抽象的角度来看待它,就会清楚地看到,状态是复杂应该中重要一块

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!