vue3中组件配置v-model

vue3中组件配置v-model

1. vue3中组件如果使用了v-model那么我们的组件会接收到一个默认的值modelValue和默认自定义事件update:modelValue
2. 实现的代码

//父组件
<template>
  <Primary-input placeholder="账号" v-model="query.username" type="text"></Primary-input>
</template>

//子组件
<template>
  <div class="inputBox">
    <input :type="type" required="required" :value="modelValue" @input="onInput">
    <span>{{placeholder}}</span>
  </div>
</template>
<script lang="ts" setup>
import {reactive,toRefs,ref} from "vue";
/*defineProps<{ // 采用ts专有声明，无默认值
  modelValue:String,
  placeholder:String
}>()*/
// 采用ts专有声明，有默认值
interface Props {
  modelValue?:string,
  placeholder?:string,
  type:string
}
const props = withDefaults(defineProps<Props>(), {
  type:"text"
})

/*defineProps({ // 非ts专有声明
  msg: String,
  num: {
    type:Number,
    default: ''
  }
})*/
/*ts专有*/
const emit= defineEmits<{
  (e: 'update:modelValue', modelValue: String): void
}>()
/*非ts专有*/
//const emit= defineEmits(['update:modelValue'])

const onInput = (e:Event) =>{
    emit('update:modelValue',(e.target as HTMLInputElement).value)
}
</script>