Vue从入门到实战：自定义组件的v-model

来自CloudWiki
跳转至： 导航， 搜索

基本使用

很多表单UI组件都是对HTML的表单控件进行的封装，在使用这些UI组件时，也可以使用v-model指令来实现数据双向绑定。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-input v-model="message"></my-input>
		</div>
	
		<script>
			Vue.component('MyInput', {
				data: function(){
					return {
						inpuStyles: {
							'background-color': '#cdcdcd',
							opacity: 0.5
						},
					}
				},
				props: ['value'],
	      template: `<div>
	      		<input :value="value" :style="inpuStyles">
	      		<label>{{ value }}</label>
	      	</div>`  		
  		});
  		
			var vm = new Vue({
			  el: '#app',
			  data: {
			  	message: 'Vue.js无难事'
			  }
			})
		</script>
	</body>
</html>

在控制台窗口中，输入vm.message="hello",可以看到文本输入控件中的内容和<label>元素的内容都发生了改变。

在使用MyInput组件时，使用了v-model指令绑定到根实例的message上，但是没有使用MyInput组件定义的value prop来传值，组件时怎么接收到数据的呢 ？

默认情况下，一个组件上的v-model会把value作为prop，把input事件作为event.本例message属性的值实际上传给了MyInput组件的value属性。

model选项

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突： 

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

new Vue({
  el:'#app',
  data:{
     lovingVue:true
  }
}

现在在这个组件上使用 v-model 的时候： 

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：自定义组件的v-model&oldid=24947”