1. 父组件传子, 在子组件写props 接收数据。

2. 子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit(事件名称, 要传递的参数 )触发当前实例上的事件

var vm;
window.onload=function () {
    vm=new Vue({
        el:'#box',
        data:{
            flag:'my-hello',//设置标记,写的哪个组件就显示哪个组件
            leftwords:''
        },
        components:{//局部组件
            comment,//上面定义了全局组件，在这里只是调用，所有这里是变量，注意不要加引号
            'my-parent':{ //组件名 父组件
                template:'#parent', //对应模板名
                data(){ //data为固定写法,表示当前组件的数据
                    return{
                        page:40,
                        pname:'parent',
                        cage:'',
                        cname:''
                    }
                },
                methods:{//组件对应的方法
                    getChildInfo(name,age){
                        this.cage=age;
                        this.cname=name;
                    }
                },
                components:{
                    'my-child':{//子组件
                        template:'#child',
                        data(){
                            return{
                                cage:'10',
                                cname:'child'
                            }
                        },
                        props:['message','message2'], //父传到子 porps的值可以是数组也可以是对象,允许高级配置,如类型判断,数据校验,设置默认值
                        methods:{
                            send(){
                                //console.log(this);此时的this为子组件的实例vm
                                this.$emit('e-child',this.cname,this.cage); //$emit发送数据,第一个名字自定义,第二个是传递的参数
                            },
                            mounted(){//挂载后调用
                                this.send();
                            }
                        }
                    }
                }
            }
        }
    });
}

<template id="parent">
    <div>
        <h3>我是父组件,访问自己的数据:姓名:{{pname}},年龄:{{page}}</h3>
        <h3>我是父组件,接收子组件的数据:姓名:{{cname}},年龄{{cage}}</h3>
        <!--子组件通过 :(定义变量,传递参数)-->
        <my-child :message="pname" :message2="page" @e-child="getChildInfo"></my-child>

    </div>
</template>
<template id="child">
        <div>
            <h3>我是子组件,访问父的数据,姓名:{{message}}</h3>
            <h3>我是子组件,访问父的数据,年龄:{{message2}}</h3>
            <button @click="send()">将子组件的数据向上传递给父组件</button>
        </div>
</template>

<div id="box">
    <my-parent></my-parent>
</div>