脚本宝典收集整理的这篇文章主要介绍了Vue.js组件中v-model的使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在 Vue.js 中，经常会使用 v-model 实现表单的双向数据绑定功能。

使用 Element 组件时，组件库中的含有输出类型的自定义组件，都会使用v-model指令，该指令绑定的元素就是组件的输出结果。比如 select选择器

平常只使用v-model做表单元素的数据绑定，没有仔细研究过这背后的原理，不是很理解自定义组件是怎么实现这个功能的。

查找了一下相关资料，其实 Vue.js 的官网上有教程有相关的资料。

使用自定义事件的表单输入组件

v-model 其实是一个语法糖，这背后其实做了两个操作

1. v-bind 绑定一个 value 属性

2. v-on 指令给当前元素绑定 input 事件

在原生表单元素中

<input v-model='something'>

就相当于

<input v-bind:value="something" v-on:input="something = $event.target.value">

当input接收到新的输入，就会触发input事件，将事件目标的value 值赋给绑定的元素

在自定义组件中

<my-component v-model='something'></my-componment>

相当于

<my-component v-bind:value='something' v-on:input='something = arguments[0]'></my-component>

这时候，something接受的值就是input是事件的回掉函数的第一个参数
所以在自定义的组件当中，要实现数据绑定，还需要使用[$emit]去触发input的事件。

this.$emit('input', value)

脚本宝典总结

以上是脚本宝典为你收集整理的Vue.js组件中v-model的使用全部内容，希望文章能够帮你解决Vue.js组件中v-model的使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。