vue 父子组件通信 vue/React

vue3

1.父组件可以使用props把数据传递给子组件
2.子组件可以使用emit让父组件监听到自定义事件

1.父组件传值给子组件是由父组件通过v-bind绑定数值，然后传给子组件，子组件需要通过defineProps接收使用

• 带有<script setup>的组合API - defineProps()示例
  父组件

<script>
const fatherMessage = ref('world')
</script>
<Son :fatherMessage="fatherMessage"></Son><!-- 动态数据 -->
<Son fatherMessage="hello"></Son><!-- 静态数据 -->

子组件

const props = defineProps({ fatherMessage: Boolean });

在子组件中使用props.fatherMessage访问父组件传递过来的值
注意：父组件向子组件传值时，以上两种写法有本质区别，如果加引号，传过去的是变量的值，否则就是一个字符串。
2.当我们emit一个事件时，可以用一个或多个参数调用一个方法，然后父组件使用v-on或@指令可以监听子组件自定义添加的事件并接收参数
在最简单的情况下，defineEmits是一个字符串数组，每个字符串是一个事件的名称

• 带有<script setup>的组合API - defineEmits()示例
  父组件

<Son @sonFun="sonFun"></Son>
const sonFun = (values) => {
    console.log("values from son:",values)
}

子组件

const emit = defineEmits(['sonFun'])
const handleChange = () => {
    emit('sonFun',values)
}

参考：segmentfault.com/a/119000004…

React

函数式传参：子组件使用forwardRef
1.父传子，也是通过props向子组件传值
父组件

import { Footer } from './components/Footer';
import './App.css';
 
function App() {
  let list = [
    1, 2, 3, 4, 5, 6, 7, 8
  ]
  return (
    <div className="App">
      <Footer data={list} />
    </div>
  )
}
 
export default App;

子组件

import { forwardRef } from "react"
 
export const Footer = forwardRef((props, ref) => {
  return (
    <div>
      <ul>
        {props.data.map(item => {
          return <li>{item}</li>
        })}
      </ul>
    </div>
  )
})

父传子，也可以通过props传方法
父组件

import { Footer } from './components/Footer';
import './App.css';
 
function App() {
  const [flag,setFlag] = useState(Boolean)
  const closeBox = () => {
    setFlag(false)
  }    
  return (
    <div className="App">
      <Footer closeBox={closeBox} />
    </div>
  )
}
 
export default App;

子组件

import { forwardRef } from "react"
 
export const Footer = forwardRef((props, ref) => {
  return (
    <div>
     <Button onClick={props.closeBox}>Cancel</Button>
    </div>
  )
})

2.子传父，父组件需要向子组件传递一个函数，然后，子组件通过props获取函数并附上参数，最后，父组件通过函数拿到子组件传递的值\