今天查驗一位前端同事程式碼，發現他為了方便封裝了一個通用輸入框。但也發現了很嚴重問題！！！
先看看他的封裝：
子元件：
<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地址