父子通訊

• 父傳子
  

vue:

父元件：<child :msg="datamsg" ></child> //子元件的msg屬性上加資料,datamsg是資料
子元件：export default {
            props:["datamsg"] //子元件得到的資料，儲存在props中
        }
        html:
            <p>{{msg}}</p> //在元件的html頁面進行渲染

將父元件中的資料以屬性形式放在父元件裡面的子元件上，然後子元件再在vue的例項中通過props:[]去得到父元件傳的資料。

react:

父元件：<Child msg={datamsg}></Child> //子元件 傳輸的資料為datamsg 
子元件：<p>{this.props.msg}<p> //子元件頁面上渲染

將父元件中的值放在子元件上，子元件就可以通過this.props.屬性名得到。

angular:

父元件：
js:
export class Father{    //在裝飾器下面的類裡寫的資料。
    msg="來自父元件的問候"
    }
html:
<app-child [msg]="msg"></app-child> //放在子元件的屬性上
子元件：
js:引入Input模組
    export class child{
        @Input() msg; //子元件得到資料
    }
html:<p>{{msg}}</p> //子元件進行頁面渲染
 

在父元件的類裡面吧資料寫好，然後在父元件裡面的子元件標籤上寫上動態屬性，子元件通過引入Input模組，寫上@Input()這個裝飾器。然後就可以得到資料。

• 子父通訊

vue:

子元件：<button @click="giveData"></button>//在子元件的button按鈕上新增點選事件
export default {
    data(){
        return{
            msg:"我是子元件的資料"
        }
    }
    methods:{
        giveData(){
            this.emit("give-data",msg)//新增自定義事件
        }
    }
}

父元件：<child v-on:give-data="showData"></child> //在父元件的子元件標籤上面新增自定義的方法
    export default{
        methods:{
            showData(data){
                console.log(data) //得到子元件傳遞過來的資料
            }
        }
    }
 

vue的子父通訊是通過自定義事件emit完成的。需要在子元件上新增事件，然後在事件的方法裡面建立一個自定義事件，並把資料放上去，然後在父元件裡面的子元件標籤上面使用自定義事件得到資料。

react:

使用state,將資料穿在狀態中，父元件可以通過this.state獲取到資料，而子元件也可以通過setState設定資料。

angular:

使用emit自定義事件
子元件：
    ts:
        匯入Output和EventEmitter兩個模組
        export class Child{
            @Output() constmEventToApp=new EventEmitter();//建立emit事件
            ngInit(){
                this.constmEventToApp.emit("資料") //在dom掛載時將資料放入自定義事件中
            }
        }

父元件：
    html:
    <Child (constmEventToApp)="handleData($event)"></Child>//將子元件中的自定義事件繫結到父元件下面的子元件標籤上。
    ts:
    export class Father{
        handleDate(ev){
            console.log(ev);//ev就是子元件所傳遞過來的資料
        }
    }

angular中的子父通訊是通過emit自定義事件，需要引入output和eventEmitter兩個模組，然後在父元件裡面講子元件繫結自定義事件。自定義事件必須要寫上$event，這是子元件的資料。