前言
公司業(yè)務(wù)需要枕扫，react、vue辱魁、angular都有接觸[\無奈臉]烟瞧。雖然說可以拓展知識廣度，但是在深度上很讓人頭疼染簇。最近沒事的時候回憶各框架父子組件通信参滴，發(fā)現(xiàn)很模糊，于是乎稍微做了一下功課锻弓，記錄于此砾赔，以便加深理解。
React
React是單向數(shù)據(jù)流青灼，當(dāng)有多個組件需要共享狀態(tài)的時候暴心，這就需要把狀態(tài)放到這些組件共有的父組件中，相應(yīng)地杂拨，這些組件就變成了子組件专普，從而涉及到父子組件之間的通信。
父組件通過props 給子組件傳遞數(shù)據(jù)弹沽，子組件則是通過調(diào)用父組件傳給它的函數(shù)給父組件傳遞數(shù)據(jù)檀夹。
父組件：
import React, { Component } from 'react';
import Child from './child'
class App extends Component {
constructor(props){
super(props);
this.state={
msg:'父類的消息',
name:'John',
age:50
};
this.callback = this.callback.bind(this);
}
// 通過子組件調(diào)用該方法接收從子組件傳過來的消息
callback(msg,name,age){
this.setState({msg});
this.setState({name});
this.setState({age});
}
render() {
return (
<div className="App">
<p> Message: {this.state.msg}</p>
<Child callback={this.callback} age={this.state.age} name={this.state.name}>
</Child>
</div>
);
}
}
export default App;
子組件：
import React from "react";
class Child extends React.Component{
constructor(props){
super(props);
this.state={
name:'Andy',
age:20,
msg:"來自子類的消息"
};
// 這里目的是為了改變this的指向筋粗。使得在函數(shù)單獨調(diào)用的時候，函數(shù)內(nèi)部的this依然指向child組件击胜，亦可用箭頭函數(shù)的方式
this.change = this.change.bind(this);
}
change(){
//調(diào)用父組件的方法修改父組件的內(nèi)容,即子傳父
this.props.callback(this.state.msg,this.state.name,this.state.age);
}
// 通過this.props接收從父組件穿過來的消息
render(){
return(
<div>
<div>{this.props.name}</div>
<div>{this.props.age}</div>
<button onClick={this.change}>點擊</button>
</div>
)
}
}
export default Child;
VUE
1.父—>子
<!-- 父組件 -->
// 父組件通過屬性綁定給子組件傳值
<parent>
<child :parentToChild="content"></child>
</parent>
data(){
return {
content:'sichaoyun'
};
}
<!-- 子組件 -->
// 子組件通過props接收數(shù)據(jù)
export default {
props: {
parentToChild: String // 指定字符串類型亏狰，這里還有其他方式，可參考下面鏈接
}
}
//子組件接收后就可以在template中使用
// 或者在方法中通過this.parentToChild使用
<template>
<div>
<p>{{parentToChild}}</p>
</div>
</template>
- 子—>父
//vue2.0只允許單向數(shù)據(jù)傳遞偶摔，我們通過出發(fā)事件來改變組件的數(shù)據(jù)
<!-- 子組件代碼 -->
<template>
<div @click="open"></div>
</template>
methods: {
open() {
this.$emit('showbox','the msg'); //觸發(fā)showbox方法暇唾，'the msg'為向父組件傳遞的數(shù)據(jù)
}
}
<!-- 父組件代碼 -->
<child @showbox="toshow"></child> //監(jiān)聽子組件觸發(fā)的showbox事件,然后調(diào)用toshow方法
methods: {
toshow(value) {
console.log(value); // the msg
}
}
- 補充以下用emit和on來進行父子以及兄弟組件通信的知識，雙手奉上鏈接
兄弟組件通信問題：emit和on
Angular2+
- 父—>子
// -----------------------------父組件---------------------------
// js:在裝飾器下面的類里寫的數(shù)據(jù)辰斋。
export class Father{
msg="來自父組件的問候"
}
// html: 通過屬性綁定傳值
<app-child [msg]="msg"></app-child> //放在子組件的屬性上
// ----------------------------------子組件---------------------------
// js:引入Input模塊
export class child{
@Input() msg; //子組件得到數(shù)據(jù)
}
// html:
<p>{{msg}}</p> //子組件進行頁面渲染
- 子—>父
子組件使用EventEmitter創(chuàng)建自定義事件策州，并且通過@Output()裝飾器把它作為屬性暴露出來，父組件通過綁定這個屬性來監(jiān)聽事件從而獲取子組件數(shù)據(jù)宫仗。
// 使用emit自定義事件
// ------------------- 子組件代碼-----------------------------------------
// ts:導(dǎo)入Output和EventEmitter兩個模塊
export class Child{
@Output() constmEventToApp=new EventEmitter();//創(chuàng)建emit事件
ngInit(){
this.constmEventToApp.emit("數(shù)據(jù)") //在dom掛載時將數(shù)據(jù)放入自定義事件中
}
}
// -----------------------------父組件代碼------------------------------
// html:
<Child (constmEventToApp)="handleData($event)"></Child>//將子組件中的自定義事件綁定到父組件下面的子組件標簽上够挂。
// ts:
export class Father{
handleDate(ev){
console.log(ev);//ev就是子組件所傳遞過來的數(shù)據(jù)
}
}
總結(jié)至此！由于本人才疏學(xué)淺藕夫，各處借鑒得此文章孽糖，so卿啡，有不對的地方歡迎各路大神指正脯倒，非常感謝！
特別鳴謝下面各位大神的文章牙甫，附上鏈接于此
React 父子組件之間的通信
vue2.0 父子組件通信 兄弟組件通信
angular,vue,react的父子通信
