自定义组件实现v-model，以及多个v-model

1.代码：

1-1.父组件

引入子组件 test-cns1

<template>
	<view class="content">
		<!-- v-model 接收单个；.sync 接收多个 -->
		<!-- vue2写法 -->
		<test-cns1 v-model="name" :firstName.sync="first"  :lastName.sync="last"></test-cns1>
		<hr>
		<!-- vue3写法 -->
		<!-- <test-cns1 v-model="name" v-model:first-name="first"   v-model:last-name="last"></test-cns1> -->
		{{first}}<br>{{last}}<br>{{name}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				first:'',
				last:'',
				name:''
			}
		}
	}
</script>

1-2.子组件

<template>
	<view class="test-cns">
		<!-- 单个双向绑定 input-->
		name:<input type="text" :value="name" @input="$emit('input', $event.target.value)">
		<!-- 多个双向绑定 update: -->
		firstName:<input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)">
		lastName: <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
	</view>
</template>

<script>
	export default {
		props: {
			name:String,
			firstName: String,
			lastName: String
		}
	}
</script>
<style scoped>
	.test-cns {
		display: flex;
		flex-direction: column;
	}
</style>

2.总结：

在子组件单个双向绑定发送事件使用input，多个使用 update:Name；父组件接收时，v-model 接收单个，.sync 接收多个（vue3中使用v-model:name的写法）