将数据从分部视图传递到父视图

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    this.handleDataFromChild = this.handleDataFromChild.bind(this);
  }

  handleDataFromChild(data) {
    this.setState({ data });
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent onDataReceived={this.handleDataFromChild} />
        <p>Data from child: {this.state.data}</p>
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  sendDataToParent = () => {
    const data = "Hello from child!";
    this.props.onDataReceived(data);
  };

  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <button onClick={this.sendDataToParent}>Send Data to Parent</button>
      </div>
    );
  }
}

<!-- 父组件 -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent @data-received="handleDataFromChild" />
    <p>Data from child: {{ data }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: null
    };
  },
  methods: {
    handleDataFromChild(data) {
      this.data = data;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>Child Component</h2>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = "Hello from child!";
      this.$emit('data-received', data);
    }
  }
};
</script>