-------------vue-------------

子传父

父组件Parent.vue

<!--父组件引入的子组件-->
<view class="parent">
<!--sendMessage===子组件名字-->
      <sendMessage @setParent='getChild'></sendMessage>
</view>

<!-- ------父组件data的值------------>

data() {
    return {
            messageData:'我是父组件的变量喔',
    }
}

<!-- -------父组件的方法------------>
getChild(e){
    console.log(e); //e为接收到的参数   打印的：‘我是子组件的变量’
    this.messageData = e;
    console.log(this.messageData); //打印的：‘我是子组件的变量’
}

<!--子组件的代码	-->
<view class="send-message">
       <button @click="sendMessage">发送</button>
</view>


<!--子组件data的值	-->
data() {
    return {
        childData: '我是子组件的变量',
    };
}

<!--子组件的方法	-->
methods: {
    //通过点击子组件的按钮来触发父组件的updata方法  this.childData为传过去的参数
    sendMessage(){
        this.$emit('setParent', this.childData)
    }
}

父组件拿子组件的data的值

<!----------父组件的代码  设置一个ref 然后使用$refs进行打点获取------->
<view class="parent" @click="getChildData">
      <sendMessage ref='child'></sendMessage>
</view>
<!----------父组件的方法----------->
  methods: {
	  getChildData(){
		  console.log(this.$refs.child.childData);//打印子组件data里的childData变量
		  this.$refs.child.childData=111;//改变子组件的data里childData变量为111
	  }
  }

<!----------子组件的data---------->
data() {
	return {
		     message:'',
		     childData:'我是子组件的变量',
	};
},

Vue 的全局监听 $on 和 $emit 也可以实现组件通讯

main.js中 挂载全局

Vue.prototype.$monitor = new Vue();

父组件发送

                           //$emit(事件名,数据);
this.$monitor.$emit('hellow',true);

子组件进行监听

//这里是异步
this.$monitor.$on('hellow',data => {
    console.log(data);  //true
});

-------------react-------------

父传子

父组件Parent.jsx

import React from 'react'
import Childed from '../Childen/Childen'
export default class Hellow extends React.Component {
    state = {
        obj: {
            name: '临啊枫',
            age: 18,
            sex: '男',
            doThings: ["吃饭", "睡觉", "敲代码"],
        }
    }
    render() {
        let { obj } = this.state;
        return (
            <div>
                我是父组件
                {/* 传入一个obj */}
                <Childed obj={obj} />
            </div>
        )
    }
}

子组件 childen.jsx

import React, { Component } from 'react'
export default class index extends Component {
    render() {
        console.log(this.props);
        //这里打印 ：{obj: {name: "临啊枫", age: 18, sex: "男", doThings: Array(3)}}
        //我们把obj从props中取出来
        const { obj } = this.props;
        console.log(obj);
        return (
            <div>
                我是子组件 <br />
                今天要做的事是：
                {obj.doThings.map(item=><span>{item} </span>)}
            </div>
        )
    }
}

子传父

父组件Parent.jsx

import React from 'react'
import Childed from '../Childen/Childen'
export default class Hellow extends React.Component {
    // 父组件定义一个方法 parentMethod 将其传给子组件
    parentMethod = (e) => {
        // 接收子组件传来的数据
        console.log(e); //输出  ["我是谁", "我在哪", "？？？"]
    }
    render() {
        return (
            <div>
                我是父组件
                {/*  父组件方法parentMethod传给子组件*/}
                <Childed parentMethod={(e)=>{this.parentMethod(e)}} />
            </div>
        )
    }
}

子组件 childen.jsx

import React, { Component } from 'react'
export default class index extends Component {
    render() {
        console.log(this.props);
        //这里接收到父组件传入的方法 {parentMethod: e => { console.log(e); }}
        return (
            <div>
                <button onClick={()=>{this.postMsg()}}>点我发送数据</button>
            </div>
        )
    }

    postMsg = ()=>{
        // 我准备将data传给父组件
        let data = ['我是谁','我在哪','？？？'];
        // 调用父组件方法 传入data
        this.props.parentMethod(data);
    }
}