v-model

vue2 v-model

// v-model 其实是一个语法糖 通过props 和 emit组合而成的
// 父组件props传递
<Child  title.sync="父组件标题"/>
<a-input v-model='keywords'/> 

// 子组件回传
this.$emit('update:title', '新标题')
this.$emit('update:value', '搜索关键字') // vue2 的v-model默认为value

vue3 v-model

// vue3舍弃sync
<Child v-model='title'> 等于 <Child v-model:modelValue='title' />
// 支持多v-model绑定
<Child v-model:title='title' v-model:subTitle='subTitle'/>
// 自定义修饰符
<Chlid v-model:name.custom="person" v-model.custom="person" />

// 子组件
const props = defineProps<{
  modelValue: string, // vue3 v-model 默认为modelValue
  nameModifiers?:{ // 传递props名加固定Modifers组成，默认为modelValueModifers,返回一个布尔值
    custom: boolean
  }
}>()
const emit = defineEmits(['update:modelValue', update:name])
const change = () => {
  emit('update:modelValue', '其他标题')
  eimt('update:name', props?.nameModifiers?.custom ? '我的名字'+ name : name)
}