vue在自定义组件中使用v-model及v-model的本质

v-model本质是什么?如何在我们写的自定义组件的使用v-model？

1、本质

• 首先我们来看看v-model是个什么东西？

• 其实本质上，v-model是v-bind以及v-on配合使用的语法糖：

<input v-model="test" />

// 就是相当于: 
<input :value="test" @input="value= $event.target.test" />

2、model选项

（1）由上面可以知道v-model的本质是什么，那么我们如何在自定义组件上使用v-model呢？首先要了解model这个选项。

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

（2）结合第一点的代码概括起来是个什么意思呢？就是说，本来默认是这样的：

• 子接收到的prop值 = value
• 监听子组件触发的事件名event = input

（3）我们要在自定义组件上用啊，老是用默认的那岂不是限制了我的发挥？于是，vue在2.2.0版本中新增了一个model选项，可以让我们这样：

• 子接收到的prop值 = "想什么值就什么值"
• 监听子组件触发的事件名event = "想什么事件名就什么事件名"

（4）还是有点蒙？没关系，实践才是检验真理的唯一标准嘛，我们来用实例跑一下，看看怎么用，不过在这之前，你得先理解父子组件中的传值、单项数据流是怎么一回事。

3、使用实例

• 父组件中使用v-model
  

  父组件中

• 子组件中的model选项就做了前面所说的事情：接收到的prop就是text，定义绑定监听的事件名就是onEmitFromChild。
  

  子组件中

• 最后我们就可以看到在组件上实现了值的绑定

实例效果.gif

• 好的，到了这里我们为了加深理解同时也是为了响应开头，达到一波首尾呼应的强烈文章效果，，，，在子组件中（父组件不用动），我们注释掉model选项，使用默认的方式，这样应该你能更好的再次理解v-model的本质。（效果跟上面的gif是一样的）

其实本质上，v-model是v-bind以及v-on配合使用的语法糖。
默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

v-model的本质

4、其他

• 其实在我的理解中，将v-model运用在自定义组件中实现值的双向绑定，这只不过是简化了单向数据流的操作。

• 但是这种写法可读性不好，可能在例如表单组件中可以较好的运用这个特性以外，还是建议宁愿麻烦一点走个完整的单项数据流，如果状态比较多就用vuex，这样可能更加直观，更好维护。