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

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

在现代的三大框架中,其中两个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


react-native时间轴组件的使用

最近在写公司的项目,因产品设计需求,需要类似如下的效果,像是一个时间轴。本着不重复造轮子的目标,在最喜欢的github上找寻合适的组件

vue 设计一个倒计时秒杀的组件

倒计时秒杀组件在电商网站中层出不穷 不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的

Vue 组件修改根实例的数据

思路:1 在组件内部监听事件并把事件 emit2 在组件上监听 emit 出来的事件3 当事件发生时执行对应的函数去修改根实例上的 data

写一个vue组件库_跟着element学习写组件

组件以插件的形式引入使用,当然,也可以直接在页面引入组件文件,两者按需使用。通过源码可知,vue不会重复安装同一个插件。以第一次安装为准,现在,可以在代码中使用组件啦~

深入探讨前端组件化开发

前端组件化开发,已经有多年的历史了,不管是服务端渲染,还是前端SPA,都有了比较成熟的组件化开发的方案。 随着组件化开发的普及,前端社区中贡献了很多不错的前端组件,都提供开箱即用的方案,使得更好的发挥组件化的优势。

Vue子组件调用父组件的方法

Vue中子组件调用父组件的方法,这里有三种方法提供参考,第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法,第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

web组件调用其他web资源

web组件可以直接或间接的调用其他web资源。一个web组件通过内嵌返回客户端内容的另一个web资源的url来间接调用其他web资源。在执行时,一个web资源通过包含另一个资源的内容或者转发请求到另一个资源直接调用。

Web组件简介

Web组件由三个独立的技术组成:自定义元素。很简单,这些是完全有效的HTML元素,包含使用一组JavaScript API制作的自定义模板,行为和标记名称(例如,<one-dialog>)。

vue中prop属性传值解析

prop的定义:在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。 prop属性中可以定义属性的类型,也可以定义属性的初始值。

vue.js自定义组件directives

自定义指令:以v开头,如:v-mybind。bind的作用是定义一个在绑定时执行一次的初始化动作,观察bind函数,它将指令绑定的DOM作为一个参数,在函数体中,直接操作DOM节点为input赋值。

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

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

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