都用vue3了，还这样用emit么？

今天查验一位前端同事代码，发现他为了方便封装了一个通用输入框。但也发现了很严重问题！！！
先看看他的封装：

子组件：

<template>
  <div>
    <input v-model="name" @input="nameBlur" type="text" placeholder="请输入名称">
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
const name = ref('')
const emits= defineEmits(['getName'])
const nameBlur = () => {
  emits('getName', name.value)
}
</script>

父页面：

<template>
  <div>
    <input-components @getName="getName"></input-components>
  </div>
</template>
 
<script setup>
import InputComponents from './InputComponents.vue'
function getName(name){
  console.log("名称："+name)
}
</script>

不知道你们看出问题没有...
不知道他是故意的还是忘了modelValue用法

来看看优化后是怎么样的：

子组件：

<template>
  <div>
    <input @input="emits('update:modelValue', $event.target.value)" />
  </div>
</template>
 
<script setup>
defineProps({
  modelValue: String
})
const emits = defineEmits(['update:modelValue'])
</script>

父页面：

<template>
  <div>
    <input-components v-model="name"></input-components>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

看出区别了吧！如果运用好：modelValue，能实现封装质的提升。
看完后他默默将之前封装的组件全进行了优化！

最近发现一个比较好用的vue+node后台管理系统
如果你正在学习和了解node和vue结合，不妨看看它：vue+node后台开源gitee地址