第二十八篇 v-model 组件运用

         前面的几篇内容讲述了父子通信和组件通信的内容，也讲述了在组件通信当中用什么样的方式方法会造成怎样的问题以及属性修改的问题，那么在Vue当中我们知道有这样一个指令v-model,它的本质是一层语法糖，能够来实现数据的双向绑定，那么v-model使用在组件上以及通信上会有哪些的妙用之处。

        现在有这样一个组件，组件当中有用户输入账户和密码，现在要在组件当中去获取 input框中的数据然后将这些数据传递出来给到我们的后端；那么现在来讲大家通过先前内容的讲解会采用的这种方式；

        
      
     提交    
     清空    

效果：

        仅仅如此简单的内容需要操作这么多，显然是不太方便的对吧；在组件中的 input框中绑定的v-model数据传出来需要付出多大的代价；我们再进一步的编写几行输出，就能够看到：

 

        看到这里，内心瞬间崩溃，编写这么多的内容，虽然能够完成想要的一个效果，但是随之而来的问题也是非常多，那么应该如何来使用v-model呢？

---

 下面来对上面的内容进行一个修改:        

    

           
         
        提交    
        清空    
    
    

 效果：

         可以看到在 props 中的获取多了一个value值，在input上: value="value"，当input数据发生变化时触发handleInput事件this.$emit("input"，evt.target.value)，这里有两个是确定的，value和input，跟上面的方式进行一个对比的话，下面的是不是很简便了些！以上就是本篇内容的使用v-model在组件当中的使用和通信！