组件、数据（父传子、子传父）的相互传递

构建组件三部曲：

1：构建一个组件：

let parent = {
    template:`<div>我是组件</div>`,
};

2：在父级标签中注册组件：

new Vue({
    el:"#app",
    components:{
        parent
    }
})

3：在父级标签中使用组件：

<div id="app">
    <parent></parent>
</div>

父传子：通过props属性:

步骤：1、需要在子组件中动态添加一个属性，属性值等于父亲的数据

<son :m="money"></son>

2、在子组件中，通过props来接收刚刚动态添加的属性

props:["m"],

注意在props中可以校验刚刚动态添加的属性值的类型：

props:{
    m:{
        type:[String,Boolean,Number,Array,Function],  //检验属性的类型 如果不写 ：传的就是一个字符串
        // default:0,  //默认值如果没有传值就调用此值
        required:true  // 表示必须传值，不能与default一起用
    }
}

子传父：通过发布订阅$emit 事件

<div id="app">
    parent:{{money}}
    <son :m="money" @changemoney="getMoney"></son>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{ money:100 },
        methods:{
            getMoney(val){
                this.money = val;
            }
        },
        components:{
            son:{
                template:`<div>son:{{m}} <button @click="change">多给钱</button></div>`,
                props:["m"],
                methods:{
                    change(){
                       this.$emit("changemoney",200)
                    }
                }
            }
        }
    })