VUE-父子间通信-双向绑定-笔记

VUE-父子间通信-双向绑定-笔记

一、组件化语法糖
每个组件都是VUE实例的子组件，这里为简化代码，直接将VUE实例作为父组件

1. 父子分开写：
   父：

const app = new Vue({
            el: '#app',
            data: {
                num1: 1,
                num2: 0
            },
            components: {
                cpn
            }
}）

子：

const cpn = {
            template: '#cpn',

2. 父子写在一起

const app = new Vue({
            el: '#app',
            data: {
                num1: 1,
                num2: 0
            },
            components: {
                cpn: {
                    template: '#cpn',

二、模块分离写法

<template id="cpn">
        <div>
            
        </div>
</template>

三、使用

<cpn></cpn>

或者

<cpn />

四、父传子
将父组件的num1,num2传给子组件，用props方法，注意分两步，第一步是将props方法写在子组件中：

components: {
                cpn: {
                    template: '#cpn',
                    props: {
                        number1: Number,
                        number2: Number,
                    },

第二步要在标签里进行绑定：

<cpn :number1="num1" :number2="num2">

五、将number显示在网页上
这时需要在标签模板里面写上HTML：

<template id="cpn">
        <div>
            <h2>number1={{number1}}</h2>
            <h2>number2={{number2}}</h2>
        </div>
</template>

就可以在网页中看到


六、希望一个输入框和number进行双向绑定
1、注意这里不建议将input和number1直接进行双向绑定，因为number1是在props里面，props里面的数据来自父组件，双向绑定会报错，所以先用data（注意子组件里的data要用函数返回值形式）获取props里面的number:

props: {
   number1: Number,
   number2: Number,
},
data() {
   return {
        dnumber1: this.number1,
        dnumber2: this.number2
   }
},

再进行双向绑定：

<template id="cpn">
     <div>
        <h2>number1={{number1}}</h2>
        <h2>dnumber1={{dnumber1}}</h2>
        <input type="text" v-model="dnumber1">
        <h2>number2={{number2}}</h2>
        <h2>dnumber2={{dnumber2}}</h2>
        <input type="text" v-model="dnumber2">
        </div>
    </template>

所以到这里，实现了dnumber和input的双向绑定：
num—>number---->dnumber《—》input，还没有实现number和input的双向绑定，现在这里只要dnumber的改变值传递给num就可以构成一个闭环，所以需要子传父
七、子传父，将dnumber的值传递给num
这里选择用watch方法监测dnumber值的改变：

data() {
    return {
        dnumber1: this.number1,
        dnumber2: this.number2
    }
},
watch: {
       dnumber1(newvalue) {
            this.$emit('num1change', newvalue);
       },
       dnumber2(newvalue) {
            this.$emit('num2change', newvalue);
       }
}

再为cpn标签绑定num1change事件：

<cpn :number1="num1" :number2="num2" 
      @num1change="num1change" @num2change="num2change"></cpn>

然后需要在父组件里加上对应的事件：

methods: {
   num1change(dnumber1) {
       this.num1 = +dnumber1;
   },
   num2change(dnumber2) {
       this.num2 = +dnumber2;
    }
}

这里需要将传递过来的参数dnumber数据类型转换成Number型，不然会报错，因为前面子组件里面props方法中就指定了number1的类型为Number。
现在就实现了number和input的双向绑定：

七、加一条：希望number1一直是number2的100倍
在input中输入数据时，另一个input按照对应关系一起发生变化
只需要在watch中进行计算，再通过子传父将另一个事件也调动出来：

 watch: {
    dnumber1(newvalue) {
         this.$emit('num1change', newvalue);
         this.dnumber2 = newvalue * 100;
         this.$emit('num2change', this.dnumber2);
    },
    dnumber2(newvalue) {
         this.$emit('num2change', newvalue);
         this.dnumber1 = newvalue / 100;
         this.$emit('num1change', this.dnumber1);
    }
}

现在改变一个输入框，其他的数据都在变化：