vue 自定义业务组件v-model的使用

自定义组件的v-model

关于父子组件之间的数据传递问题，vue子组件像父组件传值时，一般需要子组件emit父组件的监听方法。子组件在不同的父组件使用时，需要父组件都设置监听方法，费时费力。

此时就可以使用组件的model的选项。具体请参考vue官网。

自定义组件内部设置model选项：
model: {
	prop: '',//绑定自定义组件的v-model 
	event: ''//绑定的事件，用于更新上面设置的prop
}

官网例子

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)"
    >
  `
})

<!--使用组件-->
<base-checkbox v-model="lovingVue"></base-checkbox>

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

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

自定义业务组件

对于数据复杂且多次用到的功能，这种情况我们可以封装成一个功能组件方便使用。

例如我是用的element-ui的组件，根据业务功能把多个form元素的组件封装成一个组件。

<template>
	<el-select v-model="nowObj" value-key="obj">
		<el-option v-for="(obj,index) in objs" :key="index" 
		:value="obj" :label="obj.label"></el-option>
	</el-select>
</template>
<script>
	export default {
		name: 'objItem',
		model: {
			prop: 'obj',//绑定的值，父组件绑定的v-model
			event: 'change'//关于绑定值（model.prop）的赋值事件
		},
		props: {
			obj: {
				type: Object//需要在组件的 props 选项里声明绑定的prop
			},
		},
		data(){
			return {
				nowObj: this.obj,//如果绑定model.prop用在组件的v-model上 而不是v-bind,就需要在data里面复制一遍
				//可以看到el-select 是v-model绑定了nowObj
				objs: []
			}
		},
		watch: {
			'nowObj' (val) {
				//当值改变时，触发model.event绑定的事件，来改变父组件的值
				this.$emit('change', val);
			}
		}
	}
</script>

我理解的组件中的model选项：

1. model.prop 这个值就是绑定v-model数据的值，这个数据实现双向流动。
2. model.event 绑定的model.prop改变时触发的事件类型。
3. 数据变更时，要显示的emit(model.event, newval);

相比于触发父组件的监听方法，可以减少一部分工作量。

第一次写描述不清的欢迎提问或者联系我。
QQ：876899068