Vue3中的v-modul语法糖超详细解析，和用法

 父组件中

<template>
  <div>
    <Son v-model="city" v-model:age="age" v-model:sss="names"></Son>
    <!-- 等价于下面的代码 -->
    <!-- 添加了一个自定义属性 :modelValue(v-model默认添加的绑定属性为modelValue)
     一个自定义事件函数，通过传参给自定义属性绑定的值赋值 (默认的自定义事件为update:modelValue)  -->
    <!-- <Son :modelValue="city" @update:modelValue="val=>city=val"></Son> -->
  </div>
</template>

<script>
// 导入组件
import Son from '@/v-model/The-son.vue'
import { ref } from 'vue'
export default {
  setup() {
    let city = ref('北京')
    let age = ref(99999)
    let names = ref('大大大')
    return { city, age, names }
  },
  // 注册组件
  components: {
    Son
  }
}
</script>

子组件中

<template>
  <div>这是子组件中父组件中的city值：{{ modelValue }}</div>
  <div>这是子组件中父组件中的age值：{{ age }}</div>
  <div>这是子组件中父组件中的age值：{{ sss }}</div>
</template>

<script>
export default {
  // 通过属性接收
  props: ['modelValue', 'age', 'sss'],
  setup(props, ctx) {
    setTimeout(() => {
      // 调用
      ctx.emit('update:modelValue', '廊坊')
      ctx.emit('update:age', 88888)
      ctx.emit('update:sss', '哒哒哒哒哒')
    }, 3000)

    return {}
  }
}
</script>

通过props属性和emit函数来实现父子组件通讯