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 (
   
    
   
  );
 }
}

function Layout() {
 return (
  

   
   
  
 );
}

// A component may consume multiple contexts
function Content() {
 return (
  
   {theme => (
     
   )}
  
 );
}

任意组件之间

Vue

对于任意组件，简单的可以使用EventBus，对于更为复杂的建议使用Vuex。

React

简单的使用EventBus，复杂的使用Redux

上述内容就是Vue和React组件怎么实现传值，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

当前题目：Vue和React组件怎么实现传值
文章来源：http://6mz.cn/article/goeisp.html