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中输入值，会改变所有对应参数里面的值