1.父组件调用子组件，并且向子组件传递参数，做了说明，那么在子组件当中，怎么去接收父组件传来的参数？其实很简单。在子组件的script里面，export default这个参数json里面，有一个props的项，可以需要接收的参数定义好

<body>
    <div id="app">
        <!-- 父组件 ，可以在引用子组件的时候，通过 属性绑定（v-bind :） 的形式
        把需要的东西  以属性绑定的形式 传递到子组件 里面 -->
        <com1 v-bind:ee="msg"></com1>
    </div>


<script>
    //这个 Vm 相当于是一个组件 是父组件
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123 啊 父组件的数据'
        },
        methods:{

        },

        //下面这个component是子组件
        //结果：经过演示，发现，子组件，默认不能访问 父组件中的 data 数据和 methods 方法
        components:{
            com1:{

                // data 里面的数据 都是可读可改的
                data(){//注意：子组件的 data 不是父组件传来的 是自己私有的自己创建的
                    return{
                        title:'123',
                        content:'www'
                    }
                },

                template:'<h2 @click="change"> 这是子组件 ---{{ ee }}</h2>',
                // 注意：组件中的 所有props 中的数据 都是通过 父组件传递过来的
                // props 中的数据只读 不能重新赋值
                props:['ee'],//把父组件传递过来的 ee 属性 在props 数组中 定义一下
                //这样才能使用数据

                methods:{
                    change(){
                        this.ee='你被修改了'
                    }
                }
            }
        }
    })
</script>
</body>
</html>

2.子组件往父组件传递参数

<div id="app">
        <!-- 父组件向子组件 传递方法 使用事件的绑定机制 v-on： @ 
        当我们自定义的一个 事件属性 之后 那么 子组件就能够 通过某些方式，来掉用这个方法-->
        <com2 @func="show"></com2>
    </div>

    <template id="tmp1"> 
        <div>
            <h1 >这是子组件</h1>
            <input type="button" value="这是子组件的按钮 -点击他 触发 父组件传递过来的 func 方法" @click="myclick">
        </div>
    </template>
<script>
    //定义了一个自变量类型的 组件模板对象
        var com2={
            template:'#tmp1',
            //通过了指定了一个id 表示说 要加载这个id 的template 元素中的内容 当做 组件的HTML结构
            methods:{
                myclick(){
                    // emit 愿意：是调用的意思
                    this.$emit('func',this.sonmsg)
                    // 这里的sonmsg 参数是传到下面的 show方法 的data 参数在传到
                    // 父组件的data 里面
                }
            },
            data(){
                return {
                    sonmsg:{name:'小头儿子',age:6}
                }
            }
        }


    var vm=new Vue({
        el:'#app',
        data:{
            datamsgFromSon:''
        },
        methods:{
            show(data){

                // console.log('调用了父组件的 show 方法--- '+data)
                this.datamsgFromSon=data
            }
        },


        components:{
             // 直接给上面定义的变量 com2 就不需要 在命名了 com2:com2 简写在下面
             com2
        }
    })
</script>
</body>
</html>