Vue学习笔记-父子通信案例

<div id="app">
    <cpn :number1="num1"
         :number2="num2"
         @num1change="numchange1"
         @num2change="numchange2"
    >

    </cpn>
</div>


<template id="cpn">
    <div>
        <!--1.子组件里的双向绑定只能用子组件data里面的值-->

        <!--<h2>{{number1}}</h2>-->
        <!--&lt;!&ndash;props单向数据流，不允许子组件直接改变props里面的值&ndash;&gt;-->
        <!--&lt;!&ndash;<input type="text" v-model="number1">&ndash;&gt;-->
        <!--&lt;!&ndash;可以用子组件data里面的数据实现双向绑定&ndash;&gt;-->
        <!--<input type="text" v-model="dnumber1">-->
        <!--<h2>{{number2}}</h2>-->
        <!--<input type="text" v-model="dnumber2">-->


        <!--2.子组件的值改变时传到父组件改变父组件的值-->
        <!--v-model的本质是v-bind绑定一个value属性,v-on指令给当前元素绑定input事件-->

        <h2>{{number1}}</h2>
        <input type="text" :value="dnumber1" @:input="num1Input">
        <h2>{{number2}}</h2>
        <input type="text" :value="dnumber2" @:input="num2Input">
    </div>
</template>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const cpn = {
        template: '#cpn',
        props: { //props单向数据流，父组件传递到子组件的值不允许子组件直接改变
            number1: Number,
            number2: Number
        },
        data() { //想要修改props里的值可以在data里面保存一份，然后修改
            return {
                dnumber1: this.number1,
                dnumber2: this.number2
            }
        },
        methods: {
            num1Input (event) {
                this.dnumber1 = event.target.value
                this.$emit('num1change',this.dnumber1)
            },
            num2Input (event) {
                this.dnumber2 = event.target.value
                this.$emit('num2change',this.dnumber2)
            }
        }
    }
    const app = new Vue ({
        el: '#app',
        data: {
            num1: 1,
            num2: 2
        },
        components: {
                cpn
        },
        methods: {
            numchange1 (value) {
                this.num1 = parseInt(value)
            },
            numchange2 (value) {
                this.num2 = parseInt(value)
            }
        }
    })
</script>