1.Angular

使用@Input和@Output
这是最常用的父子组件通信方式。父组件通过@Input将数据传递给子组件，子组件通过@Output和EventEmitter将数据发送回父组件。

父组件向子组件传值：

子组件（接收数据）

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `{{ childData }}`
})
export class ChildComponent {
  @Input() parentData: any;
}

父组件（传递数据）

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-parent',
  template: `<app-child [parentData]="dataToChild"></app-child>`,
})
export class ParentComponent {
  dataToChild = 'Data from parent';
}

子组件向父组件传值：

子组件（发送数据）

import { Component, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `<button (click)="sendDataToParent()">Send Data</button>`
})
export class ChildComponent {
  @Output() dataSent = new EventEmitter<string>();
 
  sendDataToParent() {
    this.dataSent.emit('Data from child');
  }
}

父组件（接收数据）

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-parent',
  template: `<app-child (dataSent)="receiveDataFromChild($event)"></app-child>`,
})
export class ParentComponent {
  receiveDataFromChild(data: string) {
    console.log(data); // Output: Data from child
  }
}

2.Vue

在Vue中，父子组件之间的数据传递主要通过props（父向子传递）和$emit（子向父传递）来实现。

父组件向子组件传值：

子组件（接收数据）

<template>
  <div>
    <ChildComponent :parentData="parentValue" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '这是从父组件传递的值'
    }
  }
}
</script>

父组件（传递数据）

<template>
  <div>
    <p>{{ parentData }}</p>
  </div>
</template>
 
<script>
export default {
  props: ['parentData'] // 接收父组件传递的数据
}
</script>

子组件向父组件传值：

子组件（发送数据）

<template>
  <div>
    <button @click="sendToParent">点击我发送数据给父组件</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('child-event', '这是从子组件传递的值'); // 触发一个事件，并传递数据
    }
  }
}
</script>

父组件（接收数据）

<template>
  <div>
    <ChildComponent @child-event="receiveFromChild" /> <!-- 监听子组件的事件 -->
    <p>{{ childData }}</p> <!-- 显示接收到的数据 -->
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childData: '' // 用于存储从子组件接收的数据
    }
  },
  methods: {
    receiveFromChild(data) { // 定义一个方法来处理从子组件接收的数据
      this.childData = data; // 更新数据到父组件的数据中
    }
  }
}
</script>

3.React

使用props（属性）传递和回调函数

父组件向子组件传值：使用Props传递数据

子组件（接收数据）

import React from 'react';
 
function ChildComponent(props) {
  return <div>{props.data}</div>;
}
 
export default ChildComponent;

父组件（传递数据）

import React from 'react';
import ChildComponent from './ChildComponent';
 
function ParentComponent() {
  const dataToPass = "Hello from Parent";
 
  return <ChildComponent data={dataToPass} />;
  {/* 顺便复习一下使用展开运算符批量传递数据 */}
  {/*     data为json数据对象,接收端接收到的是data中各个属性值，而不是data对象 */}
  {/* return <ChildComponent {...data} />; */}
}
 
export default ParentComponent;

子组件向父组件传值：使用回调函数传递数据

子组件（发送数据）

import React from 'react';
 
function ChildComponent(props) {
  const sendDataToParent = () => {
    const dataToSend = "Hello from Child";
    props.onData(dataToSend); // 调用父组件传来的函数，并传递数据
  };
 
  return (
    <button onClick={sendDataToParent}>Send Data to Parent</button>
  );
}
 
export default ChildComponent;

父组件（接收数据）

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
 
function ParentComponent() {
  const [data, setData] = useState('');
 
  const handleDataFromChild = (childData) => {
    setData(childData);
  };
 
  return <ChildComponent onData={handleDataFromChild} />;
}
 
export default ParentComponent;