vue组件上使用v-model this.$emit(‘input‘, this.iValue)

Vue——组件上使用v-model

一、最近在工作过程中要实现一个搜索模糊匹配功能，考虑到组件的复用，就单独把搜索框抽出来作为一个子组件。在以往的开发中，我一般会在input框中的值变化时向父组件emit一个事件，并带上一些父组件中需要的参数（比如搜索的关键词，或者搜索之后返回的结果）

大概的实现方式如下：

父组件




子组件

 

二、这次在实现的时候，我隐约记得在之前看Vue api的时候提到过，给组件添加v-model，就想用这种方式尝试一下，根据官网解释我理解：

v-model这个双向绑定相当于做了两个操作：（1）给当前这个组件添加了一个value属性 （2）给当前这个组件绑定了一个input事件；由此我修改实现方式如下：

父组件：

 

子组件：

 三、总结：其实两种思路是一样的，都是子组件通过emit事件向父组件传值，但是v-model的形式更直观简单～