深刻解析Vue組件間通訊

React的基本組件元素是一個個組件，組件之間可能存在關聯、組合等關係。不一樣的組件之間，常常會發生數據傳遞或者交換，咱們稱之爲組件間通訊。 根據傳遞的複雜程度，能夠分爲三種狀況： 父子間通訊，兄弟間通訊，同其餘外部庫通訊。

父子間通訊

在學習組件的時候，props是輸入，組件是輸出。在這裏的props，就是父向子傳遞的數據。而子向父傳遞數據，則是經過父級傳遞進來的props中的函數引用，間接的喚起父級處理函數，並傳入參數。

/* 父組件 */
export default class NameInput extends Component {
 constructor(props) {
 super(props);
 this.state = {
 value: "default"
 };
 this.handleSubChange = this.handleSubChange.bind(this);
 }
 handleSubChange(newValue) {
 this.setState({ value: newValue });
 }
 render() {
 return (
 <div>
 <div>{this.state.value}</div>
 <Sub sub="sub1" subClick={this.handleSubChange} />
 </div>
 );
 }
}
複製代碼

/* 子組件 */
export default class NameInput extends Component {
 constructor(props) {
 super(props);
 this.handleChange = this.handleChange.bind(this);
 }
 handleChange() {
 this.props.subClick("new sub");
 }
 render() {
 return <div onClick={this.handleChange}>{this.props.sub}</div>;
 }
}
複製代碼

在這個例子裏，經過調用props上傳遞進來的處理函數，達到了子向父傳遞數據的目的。

兄弟間通訊

不使用其餘庫的話，藉助React原生API，有兩種方法：

經過父組件作中轉 借用父組件之外，也可使用react的Context API 關於Context API，咱們仍是先翻文檔Context。

Context主要是爲了處理多個組件可能須要獲取同一組數據，例如文檔中提到的theme，以及B端系統常常須要獲取全局登陸態，均可以使用ContextAPI。

在Context中，有兩個重要的概念，Provider和Consumer。

Provider提供一個全局的數據源，訂閱了它的數據源的Cusumer，不論節點嵌套多深均可以獲取到Provider提供的數據。

看一個例子。

點我-CodeSandbox

在一些輕量級的應用中，基本上可使用ContextAPI解決多級數據共享的問題。固然，若是要更強大，只能用Redux等庫了。

關於Redux的使用，會在下一篇詳細講解。

同其餘外部庫通訊

若是一個項目中，既有React，又有jQuery，又有Vue怎麼辦？怎麼解決這種情形下得數據流轉？

這是阿里的一道面試題，我那時沒有怎麼寫過React，基本上就是zepto和小程序，面試官沒有爲難我，提了這樣的問題。當時我提出了一種想法，發佈訂閱加適配器模式。下面簡單說一下個人想法。

若是把這個場景抽象一下，能夠看作是三種不一樣的組件須要相互通訊，它們對數據的要求不同，數據格式不一樣，可是一旦數據打到各自的組件內，其實數據流就不須要咱們關心了。

因此能夠維護一個公共的數據集市，全部人都從數據集市裏取數據，也向數據集市中發數據，數據集市是一個公開的發佈者，各組件爲訂閱者。

數據集市承擔了適配的工做，對各個組件傳進來的數據統一保存，在取數據時，根據組件的類型不一樣，派發不一樣形式的組件，這樣，基本上就將組件間通訊提高至了一個統一的數據集市，避免了組件的之間一對一通訊。

固然，這和flux的思想也很相似，統一數據源，統一分發，只和數據源交互，避免了多個組件間複雜通信帶來的數據流混亂。

瞭解更多 本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。 最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。