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的方式进行传递数据。即在祖先组件提供数据,在需要使用的组件中,注入数据,这样就可以在子组件中使用数据了。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,只是遵循框架开发者的建议,以及适应开发的比较好的实践而已。

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

(0)

相关推荐

  • react写一个select组件的实现代码

    之前一直用的antd的Select组件,但在有些端并不适用,而原生的select样式修改不灵活,遂产生自己写一个组件的想法.观察select组件: <select onChange={(value) => {this.value=value}} <option value='1'>man</option> <option value='0'>woman</option> </select> 可以看出数据都是在option中,有值val

  • react-router实现跳转传值的方法示例

    前言 本文主要给大家介绍了关于react-router跳转传值的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: react-router跳转传值 1.引入包 import {hashHistory} from 'React-router' 2.跳转传值 handleClick = (value) => { hashHistory.push({ pathname: 'message/detailMessage', query: { title:value.title, time:va

  • React 子组件向父组件传值的方法

    本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化. /***实现在输入框输入邮箱时,在div中即时显示输入内容***/ <body> <div id="test"></div> </body> //子组件 var Child = React.createClass({ re

  • React父子组件间的传值的方法

    父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th

  • React传值 组件传值 之间的关系详解

    react 组件相互之间的传值: 传值分父级组件传值给子组件 子组件传值给父组件 平级组件.没有嵌套的组件相互传值 1.父组件向子组件传值 父组件通过属性的形式来向子组件传值,子组件通过props来接受父组件传递过来的参数 //子组件 class list extends React.Component{ constructor(props){ super(props); // 初始化可以不用管 } render(){ return( <div> <div>{this.props.

  • react 组件传值的三种方法

    整理 react 组件传值 三种方式 父组件向子组件传值(通过props传值) 子组件: class Children extends Component{ constructor(props){ super(props); } render(){ return( <div>这是:{this.props.name}</div> // 这是 父向子 ) } } 父组件: class App extends React.Component{ render(){ return( <

  • react的滑动图片验证码组件的示例代码

    业务需求,需要在系统登陆的时候,使用"滑动图片验证码",来验证操作的不是机器人. 效果图 使用方式 在一般的页面组件引用即可.onReload这个函数一般是用来请求后台图片的. class App extends Component { state = { url: "" } componentDidMount() { this.setState({ url: getImage() }) } onReload = () => { this.setState({

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

    在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式 组件的传值场景无外乎以下几种: 父子之间 兄弟之间 多层级之间(孙子祖父或者更多) 任意组件之间 父子之间 Vue Vue是基于单项数据流设计的框架,但是提供了一些的语法,指令去实现一些操作 父->子:通过props进行传递数据给子组件 子->父:通过emit向父组件传值 同时,还有一些其他进行父子组件通信的方式,通过$parent和$children获取组件的父或者子组件的实例,之后通过实例对象去修

  • Vue组件之间四种通信方式详解

    目录 前言 父子组件通信​ 父组件与子孙组件的通信​ 父组件获取子组件数据​ 无需考虑组件关系的通信​ 前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法 父子组件通信​ 父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态 父组件定义,声明状态 { name: 'baidu.com' } 以及可以改

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • Vue父子组件之间的通信实例详解

    在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因

  • vuejs中父子组件之间通信方法实例详解

    本文实例讲述了vuejs中父子组件之间通信方法.分享给大家供大家参考,具体如下: 一.父组件向子组件传递消息 // Parent.vue <template> <div class="parent"> <v-child :msg="message"></v-child> </div> </template> <script> import VChild from './child.v

  • Vue.js中组件中的slot实例详解

    Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

  • Vue+Element switch组件的使用示例代码详解

    代码如下所示: <el-table-column label="商品状态" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.goods_state" class="switch" :active-value="1" :inactive-value="0&qu

  • vue 内置组件 component 的用法示例详解

    目录 component is 内置组件切换方法一: component is 内置组件切换方法二: component is 内置组件切换方法一: component组件(单独拿出一个组件来专门进行切换使用) 使用is来绑定你的组件:如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 <template>

  • vue内置组件transition简单原理图文详解(小结)

    基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 简单用法 用 v-if/v-show 控制显示隐藏,使用transition 组件控制其变化过程 一个页面子组件 router-view 的消失隐藏,使用transi

  • vue引用public目录下文件的方式详解

    有时候我们在开发h5时候,会有需要绑卡授权操作,这个时候需要同意某些协议并且这些协议是可以点击打开的,这种该怎么做呢?其实这就是一个链接,前端能够打开链接并且常用的也就是a标签喝vue自带的router-link,当然其他还有,通常来说a标签就够了 关于协议的存储,这里简单说下,在实际开发中,协议存储有以下几种: 1.存放在前端,一种是直接放在public静态资源文件夹下,webpack打包不会对其处理,直接把文件复制到存放项目的工程目录下:还有一种就是托管在cdn上,类似静态资源托管,会有一个

随机推荐