Vue学习21_Vue父子组件的数据传递案例（v-model双向绑定父子组件数据）

Vue父子组件的数据传递案例（v-model双向绑定父子组件数据）

示例代码：

    <div id="app">
        <mynpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change" />
    </div>

    <template id="npn">
        <div>
            <p>props:{{number1}}</p>
            <p>data:{{dnumber1}}</p>
            <input type="text" :value="dnumber1" @input="num1Input">
            <p>props:{{number2}}</p>
            <p>data:{{dnumber2}}</p>
            <input type="text" :value="dnumber2" @input="num2Input">
        </div>
    </template>

    <script>

        const mynpn = {
            template: '#npn',
            // 通过props传递的参数不能通过v-model进行改变
            props: {
                number1: Number,
                number2: Number,
            },
            // 若想对父组件的数据进行改变,可以设置data来进行改变
            data() {
                return {
                    dnumber1: this.number1,
                    dnumber2: this.number2,
                }
            },
            methods: {
                num1Input(event) {
                    this.dnumber1 = event.target.value;
                    this.$emit('num1change', this.dnumber1);
                    this.dnumber2 = this.dnumber1 * 2;
                    this.$emit('num2change', this.dnumber2)
                },
                num2Input(event) {
                    this.dnumber2 = event.target.value;
                    this.$emit('num2change', this.dnumber2);
                    this.dnumber1 = this.dnumber2 / 2;
                    this.$emit('num1change', this.dnumber1)
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                num1: 1,
                num2: 2
            },
            methods: {
                num1change(value) {
                    this.num1 = parseInt(value);
                },
                num2change(value) {
                    this.num2 = parseInt(value);
                },
            },
            components: {
                mynpn
            }
        });
    </script>

运行截图：