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

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

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


组件间的传值方式

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

  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


使用vue.js的动态组件模板

组件并不总是具有相同的结构。有时需要管理许多不同的状态(注:指的是根据不同状态显示不同组件)。异步加载组件对此操作很有帮助。在 Scrumpy 中组件用于提醒、评论和附件等多个地方。

编写 Vue.js 组件前需要知道的 10 件事

本文介绍了编写 Vue.js 组件前需要知道的 10 件事,其中包括:组件可以全局或局部加载;延迟加载 / 异步组件;必需的 Props;使用 $emit 触发自定义事件;多 Props 绑定和覆盖等等。

前端组件设计原则

我在最近的工作中开始使用 Vue 进行开发,但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多,但是二者之间在很多基础概念、设计思路上是相通的

vue中keep-alive组件的使用

在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态;vue里提供了keep-alive组件用来缓存状态。

Vue使用Props绑定Object并且传参

通过Props 给子组件传变量,变量是对象时,子组件无法在首次打开时获取到传入对象数据,并且在父组件中改变对象的属性,子组件也是无法监听

最简单的vue消息提示全局组件

实现功能:自定义文本:自定义类型(默认,消息,成功,警告,危险);自定义过渡时间;使用vue-cli3.0生成项目,toast全局组件编写

vue重新渲染组件(重置或者更新)

当数据通过异步操作后,对之前加载的数据进行变更后,发现数据不生效。A组件或者B组件触发数据更新,C组件数据更新了,但是C组件仍显示上一次数据。

如何从零开源一个React组件

有没有遇到这样一种情况,你花了很大精力在业务项目中写了一个组件,你觉得这个组件很通用,除了当前的业务场景还应该有其他的应用场景,所以你想开源这个组件,但又不知道从何入手。这篇文章就来聊聊如何开源一个前端组件

移动端底部导航固定配合vue-router实现组件切换

在我们平时练习或者实际项目中也好,我们常常遇到这么一个需求:移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件

React中Context

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全