vue單頁面父子傳遞

1經過點擊：

<div id="app">
    <div v-text="money" @click="reduce"></div>
    <child :m="money" @zdyclick="add"></child>
</div>
<template id="tempchild">
    <div @click="changern">{{m}}</div>
</template>

let child = {
    template:"#tempchild",
    props:{
        m:{
            type:Number,
            default:''
        }
    },
    methods:{
        changern(){
            this.$emit('zdyclick',120)
        }
    }
}
let vm = new Vue({
    el:'#app',
    data:{
        money:400
    },
    components:{child},
    methods:{
        add(val){
            this.money+=val
        },
        reduce(){
            this.money-=50
        }
    }
})

 

 

2經過input輸入：

<div id="app">
    {{money}}
    <child :m="money" @zdyclick="gai"></child>
</div>
<template id="tempchild">
    <input type="text" :value="m" @input="changer"></input>
</template>

let child = {
    template:"#tempchild",
    props:{
        m:{
            type:Number,
            default:''
        }
    },
    methods:{
        changer(e){
            this.$emit('zdyclick',Number(e.target.value))
        }
    }
}
let vm = new Vue({
    el:"#app",
    data:{money:400},
    components:{child},
    methods:{
        gai(val){
            this.money = val
        }
    }
})