Vue组件封装之封装v-model实现父子组件通讯

首先Vue 是单项数据流，v-model 只是语法糖

<input v-model="val" />		
等同于===>	<input :value="val" @input="val= $event.target.value" />

父组件

<template>
	<view class="box">
		<Son v-model="fatherValue"></Son>
	</view>
</template>

<script>
import Son from 'src/components/Son'
export default {
	components: { Son },
	data() {
		return {
			fatherValue: ''
		};
	},
	methods: {
	}
};
</script>

<style lang="scss" scoped>
</style>

子组件

<template>
	<view class="box">
		...
	</view>
</template>

<script>
export default {
	name: 'Son',
	model: {
		prop: 'value',
		//这个事件名可以随意写，它实际上是规定了子组件要更新父组件值需要注册的方法
		event: 'input'
	},
	props: {
		 value: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
			currentValue: ''
		};
	},
	watch: {
		// 监听data值的变化，变化了就将新值传给父组件
		currentValue(newVal, oldVal) {
			this.$emit('input', newVal);
		}
	},
	methods: {
	}
};
</script>

<style lang="scss" scoped>
</style>

或者

<template>
	<view class="box">
		<input
			type="checkbox"
			@change="$emit('balabala', $event.target.checked)"
			:checked="value"
		/>
	</view>
</template>

<script>
export default {
	name: 'Son',
	model: {
		prop: 'checked',
		event: 'balabala'
	},
	props: {
		checked: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			currentValue: ''
		};
	},
};
</script>