v-model Vue内置指令

v-model是Vue3的内置指令，支持Input、Select，radio等以及各种表单元素，甚至自定义组件也可以支持V-model, v-model在Vue3中是属于破坏性更新的，其次他就是一个语法糖，是通过Props和 emit去组合而成的；

Props是单向数据流，它只允许这个父级去传输数据给子级，是不允许子级去修改这个父级数据，当然vue也考虑到这个问题，他就是把这两个数据结合起来使用，做成了一个v-model

对比Vue2有哪些变化

1. 首先我们看prop，这个默认值在V2里面叫value，v3里面现在叫modelValue
2. 事件，v2里面叫input，v3里面他是通过update冒号modelValue,
3. v-bing，这种方式是v2里面sync的一个写法，v3就直接占用了，sync在v3里面直接是被移除的
4. v3是支持多个v-model的模式，甚至可以支持我们这个自定义修饰符Modifiers

自定义组件绑定v-model

自定义组件绑定v-model，去控制组件里面内容的显隐，子组件通过点击事件将数据回传给这个父级，形成一个双向绑定的模式

  <button @click="isShow = !isShow">显示隐藏</button>
  <VmodelVue v-model="isShow"></VmodelVue>
  
  const isShow = ref<boolean>(true)

子组件通过defineProps来接收v-model传过来的数据，vue3在props是叫modelValue来接收

defineProps<{
  modelValue:boolean
}>()

通过v-if去判断modelValue来判断显隐

这时候defineEmits把值传给父组件，两者结合起来使用，定义定义一个close数据，来触发emit事件，也改变父组件的数据

const emit =  defineEmits(['update:modelValue'])

const close = () => {
  emit('update:modelValue',false)
}

多个v-model绑定

绑定一个v-model:xxx="test"让子组件去接收，xxx我们自定义名称，在子组件prps函数接收即可

//父组件
 <VmodelVue v-model:textValue="test" v-model="isShow"></VmodelVue>
 
 const test = ref<string>('春风吹又生')

可以接收多个v-model

//子组件
defineProps<{
  modelValue:boolean,
  textValue1:string
}>()

子组件去修改数据，父组件同步改变，defineProps用来接收v-model传过来的数据，默认是modelValue来接收，自定义话就是用自定义名称来接收，defineEmits使用数组的方式接收多个，这两个结合使用，造成一个v-model

defineProps<{
  modelValue:boolean,
  textValue:string
}>()

const emit =  defineEmits(['update:modelValue', 'update:textValue'])

const change = (e:Event) => {
  const target = e.target as HTMLInputElement
  emit('update:textValue',target.value)
}