# React/Vue 中兄弟组件如何进行通信
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 629 (opens new window)
Author
兄弟组件可通过 prop 与回调函数式的 prop 进行通信
import { useState } from "react";
import "./styles.css";
function One({ count, setCount }) {
return (
<div style={{ border: "1px solid red" }}>
<h2>Conponent One</h2>
<button onClick={() => setCount(count + 1)}>Click</button>
<div>{count}</div>
</div>
);
}
function Two({ count, setCount }) {
return (
<div style={{ border: "1px solid red" }}>
<h2>Conponent Two</h2>
<button onClick={() => setCount(count + 1)}>Click</button>
<div>{count}</div>
</div>
);
}
export default function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<One count={count} setCount={(c) => setCount(c)} />
<Two count={count} setCount={(c) => setCount(c)} />
</div>
);
}
Author
vue
- 通过组件的实例用 ref 的方式去拿到组件的实例，然后再去拿到组件的数； a. 如果 vue3 使用 setup 语法糖的话，需要用 defineExpose 暴露出去数据；
- 使用 vuex/pinia 之类的库；
- 通过一个公有的父组件，然这个父组件当中间层去转发，通过 props/emit 之类的形式拿到下面子组件的数据，再去派发到另一个子组件；
- eventbus 事件总线