Vue与React父子组件传值实现方式分析

---

前言

在前端开发中，Vue和React是两个非常流行的JavaScript框架/库。它们各自有一套处理组件间通信的机制，特别是在父子组件之间的传值方面。理解这些机制对于构建高效、可维护的前端应用至关重要。本文将详细分析Vue和React中父子组件传值的实现方式，并提供相应的代码示例。

---

一、Vue中父子组件传值

在Vue中，父子组件之间的传值主要通过props和$emit来实现。

1.父组件向子组件传值：

父组件通过props向子组件传递数据。
子组件需要在props选项中声明它期望接收的数据。

2.子组件向父组件传值：

子组件通过$emit触发事件，并将数据作为参数传递给父组件。
父组件监听该事件，并在事件处理函数中接收数据。
Vue代码示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received from child:', data);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendToParent() {
      this.$emit('child-event', 'Hello from child');
    }
  }
};
</script>

二、React中父子组件传值

在React中，父子组件之间的传值主要通过props和回调函数来实现。

1.父组件向子组件传值：

父组件通过props向子组件传递数据。
子组件通过this.props访问传递的数据。

2.子组件向父组件传值：

父组件将一个回调函数作为prop传递给子组件。
子组件调用该回调函数，并将数据作为参数传递给父组件。
React代码示例：

// 父组件
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      parentMessage: 'Hello from parent'
    };
    this.handleChildEvent = this.handleChildEvent.bind(this);
  }

  handleChildEvent(data) {
    console.log('Received from child:', data);
  }

  render() {
    return (
      <div>
        <ChildComponent message={this.state.parentMessage} onChildEvent={this.handleChildEvent} />
      </div>
    );
  }
}

export default ParentComponent;

// 子组件
import React, { Component } from 'react';

class ChildComponent extends Component {
  sendToParent() {
    this.props.onChildEvent('Hello from child');
  }

  render() {
    return (
      <div>
        <p>{this.props.message}</p>
        <button onClick={() => this.sendToParent()}>Send to Parent</button>
      </div>
    );
  }
}

export default ChildComponent;

三、总结

Vue：

父传子：通过props。
子传父：通过$emit触发事件。

React：

父传子：通过props。
子传父：通过回调函数（作为prop传递）。
两者在父子组件传值上各有特色，但核心思想都是通过props进行单向数据流传递，并通过事件或回调函数实现子向父的通信。选择哪种方式取决于具体的项目需求和个人偏好。