vue3中v-model的双向数据绑定

在vue3中，v-model可以一次绑定多个啦。撒花放炮～～～～
本篇文章是基于vue3知识点下的，v-model一个双向数据绑定的示例

示例
//父组件

<template>
	<two v-model:name="user.name" v-model:sex="user.sex"></two>
	<div style="background-color: #2C3E50;color: #fff;padding: 20px;margin: 10px;">
		<p>一级的值：{{user.name}}是一个{{user.sex}}</p>
		<button @click="changeUser">一级按钮</button>
	</div>
</template>
<script>
	import two from './components/two.vue'
	import {
		reactive,
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'lycApp',
		components: {
			two
		},
		setup(prop, context) { //context相当于之前的this
			const user = reactive({
				name: 'lyc',
				sex: 'girl'
			})
			const changeUser = () => {
				user.name = 'zyx'
				user.sex = 'boy'
			}
			return {
				user,
				changeUser
			}
		}
	})
</script>

//子组件

<template>
	<div style="background-color: cadetblue;color: #fff;padding: 20px;margin: 10px;">
		<p>二级的值：{{name}}是一个{{sex}}</p>
		<input type="text" :value="name" @input="changeName" placeholder="姓名" ref="refName"/>
		<input type="text" :value="sex" @input="changeAge" placeholder="性别" ref="refSex"/>
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default{
		name:'two',
		props:['name','sex'],
		setup(props,context){
			const refName = ref() //获取input为name的值
			const refSex = ref() //获取input为sex的值
			const changeName = ()=>{
				context.emit('update:name',refName.value.value) //关键点
			}
			const changeAge = ()=>{
				context.emit('update:sex',refSex.value.value)//关键点
			}
			return {
				refName,
				refSex,
				changeName,
				changeAge
			}
		}
	}
</script>

<style>
</style>

//效果图

点击一级按钮，一二级的值都会改变。在二级的input中输入值，会改变所有对应参数里面的值