Vue中怎么使用v-model自定义组件，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
我们在使用vue的时候如果想实现双向数据绑定，就会使用v-model，代码如下：
计算
安全
数据库
网络和加速
企业服务
<input v-model="something">那要是自定义了一个组件，想实现双向数据绑定该如何呢？首先我们要清楚v-model的原理，上面的代码其实是如下代码的一种简写：
<input :value="something" @:input="something = $event.target.value">下面我们来看一个需求,代码如下：
<div id="app"> <p>{{msg}}</p> <my-input> </div>通过完成my-input组件的代码，实现数据双向绑定。
第一种实现方式，如果my-input换成input直接一个v-model就搞定了，但是现在我们不使用v-modle如何实现呢？看代码：
<body><div id="app"><p>{{msg}}</p><!-- 使用自定义子组件,通过value绑定msg ,--><my-inputt :value="msg" @input="changemsg"></div><script>// 1、自定义组件,// a、用props接收value传递过来的参数,// b、用内部数据接收value// c、新建oninput方法，更改currentvalue,// 让子组件函数触发父组件函数，并传值// d、建立模板，在文本框中绑定通过value绑定currentvalue，// 通过input绑定oninput事件Vue.component("my-inputt", { template: `<div> my-input: <input type="text" :value=currentvalue @input="oninput"/> </div>`, props: ["value"], data() { return { currentvalue: this.value } }, methods: { oninput(e) { this.currentvalue = e.target.value; this.$emit('input', e.target.value) } }})new Vue({ el:"#app", data: { msg: "初始值" }, methods: { changemsg(v) { this.msg = v } }})</script></body>关键点在于自组件如何向父组件传值，数据的流向是，父组件将msg传递个自组件，自组件拷贝了一个副本，修改副本后通过触发父组件绑定的函数，从而达到数据双向绑定的原理。
下面我们在组件中使用v-model来实现上面的功能：
<body> <div id="app"> <p>{{msg}}</p> <my-input v-model="msg"> </div><script>Vue.component("my-input",{ template:`<div> <input type="text" :value="currentValue" @input="Oninput"> </div>`, props:["value"], data(){ return { currentValue:this.value } }, methods: { Oninput($event){ this.currentValue = $event.target.value; this.$emit('input',$event.target.value) } }, created () { console.log(this.value) }})new Vue({ el:"#app", data:{ msg:"初始值" }})</script></body>对比一下我们发现使用v-model相对来说比较简洁，而且不需要对父组件增加额外的方法，第一种方案父组件额外定义了一个changemsg的函数，而第二种方案却没有，第二种方案只需要监听自组件内部事件，在相应的地方触发input事件即可，更改数据的事情vue会自动更新。
对于一个带有 v-model 的组件原理大概有以下几点：
1、首先带有v-model的父组件通过绑定的value值（即v-model的绑定值）传给子组件
2、然后子组件通过 prop接收一个 value;
3、最后子组件利用 $emit 触发 input 事件，并传入新值value给父组件；
4、vue会自动实现数据更新。
看完上述内容，你们掌握Vue中怎么使用v-model自定义组件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4582019/blog/4378949
