Vue.js进阶系列(7)--组件通信结合双向绑定

  在前面，小编已经陆陆续续为大家分享了很多知识点，那么今天要为大家分享的是将组件通信和双向绑定结合在一起。这个案例的需求是这样子的：
1.基本数据：父组件有数据num1和num2，子组件有数据number1和number2.
2.实现需求：
  ① 父传子：将父组件的num1和num2传递到子组件的numer1和number2；
  ② 双向绑定：通过input输入框实现子组件的number1和number2的双向绑定；
  ③子传父：将新的number1和number2传递到父组件的num1和num2中。
那么下面开始编写代码

一、父传子

结合我们前面学过的知识，父传子是通过props实现的，具体代码如下：

  在本例中，依旧将Vue作为父组件，父组件data中的数据分别是num1和num2；将子组件cnp声明为局部组件，子组件内部的数据分别是number1和number2；然后在父组件的模板div中使用子组件cnp并通过v-bind执行将num1传递给number1，将num2传递给number2.需求①已经完成

二、双向绑定

  这个需求是，我们希望在输入框输入什么数字就将该数字传递到子组件中，通过v-model实现，编写代码如下：

双向绑定.gif

  没错，就是这个效果！实现的非常完美！下面继续第三个需求。正当小编十分开心准备实现下一个需求时，发生了不可思议的事情，令小编十分的震惊！！！那就是居然在控制台上有错！！！！！！

你为什么错？.JPG

没办法，知错就改，这是为人的准则对吧，让我们先来看看到底是什么错误

image.png

  嗯？什么？你看不懂？没关系，小编刚去百度了，这个的意思就是说当你使用v-model实现一些双向绑定的时候，是不可以修改props的数据的，应该使用data或者computed计算属性。
  因为props的数据是由父组件传递过来的，如果用v-model也可以修改props中的数据，就意味着props的数据来源不单单有父组件，还有通过v-model实现的双向绑定的数据。
  试想一下，你男朋友前脚收了你的礼物，又背着你收了别的女生的礼物，这是绝对不允许的！你男朋友只能收你的礼物不准收其他女孩子的礼物！props也一样，数据来源只能是父组件。

image.png

  所以我们应该这样做:首先在子组件用data函数来接受props中的数据，然后v-model绑定的是子组件中data的变量。代码如下：

// ①第一步：用data函数接收props中要修改的数据
data(){
        return{
                dnumber1:this.number1,
                dnumber2:this.number2
        }                   
}
//②第二步： v-model绑定子组件中data的数据

//这段代码可以直接添加到components组件中，为方便观看，小编已经为你拨开了被上帝遮住的眼(#^.^#)

  在子组件的data函数声明了两个变量dnumber1、dnumber2来接收存放props中的number1、number2，然后在子组件的模板中，用v-model绑定dnumber1和dnumber2.效果如下：

正确的双向绑定.gif

  完美，data值随着输入框的改变而改变了。好啦，我知道你要说什么，props的值没有改变，因为这是下面的需求啦~

三、子传父

  想要props的值改变，就意味着父组件的数据也要改变，因为props的值是父组件传递过来的，所以我们要将子组件中变化的dnumber1和dnumber2的值传递到父组件中去。【子传父的三步骤是：发射--接收--处理】
  首先我们知道，v-model的本质是v-bind指令和input事件的组合【别问我为啥知道，因为我在 “Vue.js入门系列(8)--表单操作1 https://www.jianshu.com/p/e005fef1c3eb” 讲过，不认真听讲是要打小屁屁的╭(╯^╰)╮】，所以我们将上述 的v-model修改成下面的形式：

  没错，就像你发现的，这里有input事件，我们将在input事件内部发射自定义的事件给父组件，具体代码如下：

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);
    }
}

  呼叫父组件！呼叫父组件！发射事件成功！请注意接收。【下面是父组件接收事件的代码】

  接收成功！！接收成功！！正在紧急处理中...【下面是父组件对事件的处理】

methods:{
    numchange1(value){
        this.num1=value
    },
    numchange2(value){
        this.num2=value
    }
}
//注意哦！这个是Vue中的methods，不是component的methods

好了，万事俱备只欠东风！让我们一起嗨起来吧！

子传父.gif

成功了！小编简直就是天使！

image.png

诶？！不对，又有错！！！！！

image.png

  好吧，我知道你们看不懂，这次小编真的没有查百度，完全是靠着智慧取胜的！意思就是number1在传递给value的时候发生类型错误，默认情况下value传递的是string。你还别不信，因为下面有犯罪证据：

image.png

打印的时候确实是string类型，这个时候只需要通过parseInt转换就好了

methods:{
    numchange1(value){
        this.num1=parseInt(value)
    },
    numchange2(value){
        this.num2=parseInt(value)
    }
},

到目前为止，我们已经......等等等等，小编忘记放整个代码了

  到目前为止，就是小编今天为大家分享的组件通信和双向绑定的综合案例，虽然在实际的项目开发过程中很少会碰到这个绕的传递方式
  但是你要记住！在IT行业，林子大了，什么客户都有，所有为了以后的幸福着想，现在还是得绕点路。谢谢大家的支持!
（虽然做好了没有什么人看也没有什么人点赞的准备，但是还是要精心的为你们准备每日的干货O(∩_∩)O）
❤❤祝大家好梦φ(￣∇￣o)