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);
    }
 　　// 通过子组件调用该方法接收从子组件传过来的消息
    callback(msg,name,age){
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }

  render() {
    return (
      <div className="App">
        <p> Message: &nbsp;&nbsp;{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的指向。使得在函数单独调用的时候，函数内部的this依然指向child组件，亦可用箭头函数的方式
        this.change = this.change.bind(this);
    }

    change(){
        //调用父组件的方法修改父组件的内容,即子传父
 　　　　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;
                     

<!-- 父组件 -->// 父组件通过属性绑定给子组件传值
<parent>
    <child :parentToChild="content"></child>
</parent>

data(){
    return {
        content:'sichaoyun'
    };
}
<!-- 子组件 -->
// 子组件通过props接收数据
export default {
    props: {
        parentToChild: String        // 指定字符串类型，这里还有其他方式，可参考下面链接
    }
}

//子组件接收后就可以在template中使用
// 或者在方法中通过this.parentToChild使用
<template>
  <div>
    <p>{{parentToChild}}</p>
  </div>
</template>

//vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据

<!-- 子组件代码 -->
<template>
    <div @click="open"></div>
</template>

methods: {
   open() {
        this.$emit('showbox','the msg'); //触发showbox方法，'the msg'为向父组件传递的数据
    }
}

<!-- 父组件代码 -->
<child @showbox="toshow"></child> //监听子组件触发的showbox事件,然后调用toshow方法

methods: {
    toshow(value) {
        console.log(value);   // the msg
    }
}

// -----------------------------父组件---------------------------
// js:在装饰器下面的类里写的数据。
export class Father{
    msg="来自父组件的问候"
}
// html:  通过属性绑定传值
<app-child [msg]="msg"></app-child> //放在子组件的属性上

// ----------------------------------子组件---------------------------
// js:引入Input模块
    export class child{
        @Input() msg; //子组件得到数据
    }
// html:
<p>{{msg}}</p> //子组件进行页面渲染

// 使用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就是子组件所传递过来的数据
        }
    }