defineProps 和 defineEmits
案例:
            
            
              html
              
              
            
          
          # child
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>
            
            
              html
              
              
            
          
          # father
<Child
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>defineModel
Vue 官网 是这样描述的:从 Vue 3.4 开始,推荐的实现方式是使用 defineModel() 因此,以后这个是实现组件双向绑定的首选。
案例:
            
            
              html
              
              
            
          
          # child
<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>
<script setup>
const model = defineModel()
function update() {
  model.value++
}
</script>
            
            
              html
              
              
            
          
          # father
<Child v-model="countModel" />