Vue中怎么使用v-model自定义组件

Vue中怎么使用v-model自定义组件，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联成立与2013年，是专业互联网技术服务公司，拥有项目成都网站设计、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元东莞做网站,已为上家服务,为东莞各地企业和个人服务,联系电话:18982081108

我们在使用vue的时候如果想实现双向数据绑定，就会使用v-model，代码如下：

那要是自定义了一个组件，想实现双向数据绑定该如何呢？首先我们要清楚v-model的原理，上面的代码其实是如下代码的一种简写：

下面我们来看一个需求,代码如下：

          {{msg}}

通过完成my-input组件的代码，实现数据双向绑定。

第一种实现方式，如果my-input换成input直接一个v-model就搞定了，但是现在我们不使用v-modle如何实现呢？看代码：

{{msg}}

关键点在于自组件如何向父组件传值，数据的流向是，父组件将msg传递个自组件，自组件拷贝了一个副本，修改副本后通过触发父组件绑定的函数，从而达到数据双向绑定的原理。

下面我们在组件中使用v-model来实现上面的功能：

      {{msg}}

对比一下我们发现使用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自定义组件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

本文名称：Vue中怎么使用v-model自定义组件
当前URL：http://scyanting.com/article/peojed.html