vue父子元素数据传递

1.子元素接收数据，无校验

<div id="app">
    父亲给予：{{money}}
    <!--当前组件的属性=父级的值，给子元素加了一个childmoney属性，属性对应的数据时属于父亲的-->
    <child :childmoney="money"></child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //如果要在一个组件使用另一个组件，先保证使用的组件必须真实存在，在需要引用这个组件的实例上通过components注册这个组件，组件需要在父级的模板中通过标签的形式引用


    let vm=new Vue({
        el:'#app',
        data:{
            money:200
        },
        components:{
            child:{
                props:['childmoney'],//如用数组，相当于this.childmoney=200,会在当前组件上声明一个childmoney属性，值是父元素的
                templates:'<div>儿子接收 {{childmoney}} </div> '
            }
        }
    });
</script>

2.子元素接收数据，有校验

<div id="app">
    父亲给予：{{money}}
    <!--当前组件的属性=父级的值，给子元素加了一个childmoney属性，属性对应的数据时属于父亲的-->
    <child :childmoney="money"></child> <--校验属性类型，如不带':'得到的是字符串类型，如带':',如 :childmoney='xxx',则在script中校验其类型
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //如果要在一个组件使用另一个组件，先保证使用的组件必须真实存在，在需要引用这个组件的实例上通过components注册这个组件，组件需要在父级的模板中通过标签的形式引用


    let vm=new Vue({
        el:'#app',
        data:{
            money:200
        },
        components:{
            child:{
                props:{
                    childmoney:{ //属性名和data中的名字不能相同，校验时不能阻断代码的指向，只能警告而已。
                        type:[String, Function, Number, Object]//把childmoney定义为对象，并指定校验类型
　　　　　　　　　　　　　　 //default:0 //可以给childmoney赋予默认值，如果不传会调用默认值。
　　　　　　　　　　　　　　 required:true //此属性强制childmoney必须传递，但不能与default同时使用
　　　　　　　　　　　　　　 validator(val){  //自定义校验器，第一个参数为当前传递的值，返回true表示通过
　　　　　　　　　　　　　　　　return val>300;
　　　　　　　　　　　　　　　　}

                    }
                },
                template:'<div>儿子接收: {{childmoney}} </div> '
            }
        }
    });
</script>

 3.子元素向父元素传递数据：父元素先绑定事件，子元素触发这个事件，将参数传递过去（单向数据流，即父级数据刷新，可导致子元素数据刷新，子元素需要改数据，需先通知父级修改后刷新获取。）

<div id="app">
    父亲给予：{{money}}
    <!--当前组件的属性=父级的值，给子元素加了一个childmoney属性，属性对应的数据时属于父亲的-->
    <child :childmoney="money" @child-msg="changeMoney"></child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //如果要在一个组件使用另一个组件，先保证使用的组件必须真实存在，在需要引用这个组件的实例上通过components注册这个组件，组件需要在父级的模板中通过标签的形式引用


    let vm=new Vue({
        el:'#app',
        data:{
            money:200
        },
        methods:{
          changeMoney(val){
              this.money=val;
          }
        },
        components:{
            child:{
                props:{
                    childmoney:{
                        type:[String, Function, Number, Object]
                    }
                },
                template:'<div>儿子接收: {{childmoney}} <button @click="getMoney()" >再给点吧</button> </div> ',
                methods:{
                    getMoney(){
                        this.$emit('child-msg', 800); //触发自己的自定义事件，让父元素的方法执行。
                    }
                }
            }
        }
    });
</script>