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>