vue3.2以上的setup语法糖怎样实现双向绑定

在Vue 3.2以上版本中，我们可以使用`v-model`指令实现双向绑定，也可以使用`modelValue`和`update:modelValue`来手动实现双向绑定。

下面是一个使用`modelValue`和`update:modelValue`手动实现双向绑定的示例代码：

<template>
  <div>
    <input :value="modelValue" @input="updateModelValue($event.target.value)" />
    <p>{{ modelValue }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const inputRef = ref(null)
    const updateModelValue = (value) => {
      emit('update:modelValue', value)
    }
    return { inputRef, updateModelValue }
  }
})
</script>

在上面的代码中，我们使用了`defineComponent`函数定义了一个组件，然后在`props`中定义了`modelValue`属性。在`setup`函数中，我们使用了`ref`函数定义了一个名为`inputRef`的引用，然后定义了一个`updateModelValue`函数，当输入框的值改变时，会触发`@input`事件，调用`updateModelValue`函数更新`modelValue`属性的值。

需要注意的是，我们在`setup`函数中使用了`emit`函数来触发`update:modelValue`事件，从而更新`modelValue`属性的值。在模板中，我们使用`v-bind`指令绑定了输入框的`value`属性，并使用`@input`指令绑定了输入事件，当输入框的值改变时，会触发`@input`事件，调用`updateModelValue`函数更新`modelValue`属性的值。

最后，在父组件中，我们可以使用`v-model`指令来实现双向绑定：

<template>
  <div>
    <MyInput v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import MyInput from './MyInput.vue'

export default defineComponent({
  components: {
    MyInput
  },
  setup() {
    const message = ref('')
    return { message }
  }
})
</script>

在父组件中，我们使用`v-model`指令绑定了`message`属性和`MyInput`组件。这样，当`MyInput`组件的值改变时，会触发`update:modelValue`事件，从而更新`message`属性的值；当`message`属性的值改变时，会自动更新`MyInput`组件的值。