Vue

1.props 最直接的方式，2和3都一样，3中defineProps

2.function

子调父：父组件需要用@去传一个方法给子组件，子组件使用emit(2中$emit，3中defineEmits)调用这个方法

父调子：父组件调用子组件的函数，父组件给子组件绑定ref，子组件需要用defineExpose暴露方法。父组件通过定义出来的ref调用（常见示例：childRef.value.get()）

3.v-model 双向绑定后，子组件可以通过emit（2：$emits，3：defineEmits（格式为['update:name']））修改父组件的值

4.sync 双向绑定后，子组件可以通过emit（2）修改父组件的值

5.provide/inject 依赖注入

父组件
provide('send',value)
子组件
const value = inject('send')

6.EventBus 中央事件纵总线，vue2直接用，vue3有插件（vue3-event）

创建
//方法1：抽离成单独的js
//方法2：直接挂载到全局
Vue.prototype.$bus = new Vue()
// 方法3：注入到Vue根对象
// main.js
new Vue({
    el:"#app",
    data:{
        Bus:new Vue()
    }
})

使用
发送：
Bus.$emit('sendMsg',value)
接收：
Bus.$on('sendMsg',value=>{})

7.vuex 、 pinia

8.mitt 类似eventbus

React

函数式

1.props

2.redux

3.自定义hooks

4.context react提供了createContext和useContext

创建分为两步
首先需要创建一个Context
import {createContext, useContext} from 'react'
const testContext = createContext({
    testValue:() =>{}
})
然后创建Context Provider
export const TestProvider = ({children})=>{
    const testValue = () =>{
        console.log('xxx')
    }
    return (
        <TestContext.Provider value={{ testValue}}>
         {children}
        </TestContext.Provider>
    )
}

在app.tsx中使用Provider
import {TestProvider} from './TestProvider'

function App(){
    return (
        <TestProvider>
         //内容
        </estProvider>
    )
}

在子组件中使用Context
import {useContext} from 'react'
import {TestContext} from './TestContext'
const {testValue} = useContext(TestContext)

5.兄弟组件传参插件：pubsub

Vue与React的组件传值

Vue

React