由于vue3在api文档上没有 .sync修饰符，可能要准备去除了，所有要准备其它的方法来替换，
其实.sync是换到了v-model上了，如果v-model用在input、select等几个标签上，是和vue2没有区别的，
但在vue3它做了一些的修改，
1、修改父组件的单一的值
这种是用的比较多的，单一的值一般只用ref，
//父组件
<template>
<CustomInput v-model="message" /> {
{ message }}
</template>
<script setup>
import { ref } from 'vue'
import child from './child.vue'
const message = ref('hello')
</script>
//子组件
<template>
<div>{
{modelValue}}</div>
<button @click="mode">点击修改父组件的值</button>
</template>
<script setup>
//如果父组件没有改绑定的值是，是用以下的默认值(下面是解构)
const { modelValue } = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const mode = ()=>{
emit('update:modelValue','hi')
}
</script>
2、修改父组件的对象
这个对象是指object对象，不推荐，限制多
//父组件
<template>
<CustomInput v-model="message" /> {
{ message }}
</template>
<script setup>
import { ref } from 'vue'
import child from './child.vue'
// 修改父组件object对象，只能用ref，使用reactive还修改不了
const message = ref({name:'张三'})
</script>
//子组件
<template>
<div>{
{modelValue}}</div>
<button @click="mode">点击修改父组件的值</button>
</template>
<script setup>
const { modelValue } = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const mode = ()=>{
//而且只能先定义好赋值，
let b = {name:'李四'}
emit('update:modelValue',b)
}
</script>
3、修改父组件的数组对象
这个数组对象是指Array对象
在方法二上套个 [ ] 就行，这个方法使用起来比较宽松
这个方法在父组件可以用 ref 或 reacitve 来定义响应数据
在子组件接收时可以只接收props就行，甚至emit不用都可以，直接通过props传过来的对象修改
//父组件
<template>
<CustomInput v-model="message" /> {
{ message }}
</template>
<script setup>
import { ref } from 'vue'
import child from './child.vue'
// 修改父组件Array对象，可以用ref，也可以用reactive
const message = ref([{name:'张三'}])
</script>
//子组件
<template>
<div>{
{modelValue}}</div>
<button @click="mode">点击修改父组件的值</button>
</template>
<script setup>
const { modelValue } = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
//这时就可以直接修改了，emit的第二参数都不用写了，
//甚至你连emit都不用接收和使用，不知道是什么，可能是双向绑定数据了
const mode = ()=>{
let one = modelValue[0]
one.name = 2
//下面这个可写可不写
emit('update:modelValue')
}
</script>