自定义表单组件的v-model

游川鱼

于 2019-03-05 15:26:44 发布

阅读量783

点赞数

分类专栏： vue学习之路 h5 文章标签： vue v-mode vue组件

本文链接：https://blog.youkuaiyun.com/qq_38513816/article/details/88180146

版权

本文介绍了如何在Vue中为自定义表单组件实现v-model双向绑定。通过理解v-model的原理——结合:value和@input，可以将v-model应用到自定义组件上。同时，讨论了在不同类型的输入控件中，如单选框、复选框，可能需要使用model选项来处理v-model的冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-model指令非常好用，直接可以让表单元素的值与data中的值实现双向绑定：

	<div id="app">
    	<input type="text" v-model="msg">
  	</div>

	var app = new Vue({
   
	    el: '#app',
	    data: {
   
	      msg: ''
	    }
	})

这样msg的值就与input的输入绑定了。

如果我们自定义了一个表单组件，想用v-model来绑定数据，要怎么做呢？
定义好组件后，直接在组件上使用v-model，是实现不了的

	<div id="app">
    	<my-input v-model="msg"></my-input>
    	<p>{
  {msg}}</p>
  	</div>

	Vue.component('my-input', {
   
    	template: `<input type="text" >`
  	})
	var app = new Vue({
   
	    el: '#app'