一、前言

在 Vue3.3 版本中，官方新增了一個(gè)非常實(shí)用的語(yǔ)法糖 —— defineModel。它的主要作用是讓我們?cè)诮M件中更方便地使用 v-model，簡(jiǎn)化了以往繁瑣的寫法。
如果你之前寫過(guò) Vue2 或 Vue3 的組件，應(yīng)該對(duì) props + emit 結(jié)合 v-model 的寫法很熟悉。但這種寫法相對(duì)麻煩，而 defineModel 正是為了解決這個(gè)問(wèn)題而生的。

二、回顧傳統(tǒng)v-model用法

在 Vue3 中，父子組件傳遞雙向綁定一般是這樣寫的：

子組件（傳統(tǒng)寫法）

<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>
<template>
  <input :value="props.modelValue" @input="onInput" />
</template>

父組件

<script setup>
import ChildInput from './ChildInput.vue'
import { ref } from 'vue'
const text = ref('')
</script>
<template>
  <ChildInput v-model="text" />
  <p>父組件里的值：{{ text }}</p>
</template>

可以看到：

• 子組件需要寫 props 和 emit，再手動(dòng)觸發(fā) update:modelValue。
• 寫起來(lái)比較繁瑣，不夠直觀。

三、defineModel的出現(xiàn)

Vue3.3 引入的 defineModel 大大簡(jiǎn)化了這個(gè)流程。它讓子組件可以直接聲明一個(gè) 響應(yīng)式變量，這個(gè)變量就自動(dòng)和 v-model 綁定。

子組件（使用defineModel）

<script setup>
const modelValue = defineModel()
</script>
<template>
  <input v-model="modelValue" />
</template>

是不是簡(jiǎn)單很多？

• 不再需要 defineProps、defineEmits。
• 直接用一個(gè)變量就能完成父子雙向綁定。

四、defineModel的進(jìn)階用法

1. 指定類型

<script setup lang="ts">
const modelValue = defineModel<string>()
</script>

這樣在 TS 下會(huì)有更好的類型提示。

2. 自定義prop名稱

默認(rèn)情況下，defineModel() 對(duì)應(yīng)的就是 v-model（即 modelValue）。
但如果你想用多個(gè) v-model，也可以給它起名字：

<script setup>
const title = defineModel('title')
const content = defineModel('content')
</script>
<template>
  <input v-model="title" placeholder="標(biāo)題"/>
  <textarea v-model="content" placeholder="內(nèi)容"></textarea>
</template>

父組件這樣用：

<ArticleEditor v-model:title="postTitle" v-model:content="postContent" />

3. 添加默認(rèn)值和校驗(yàn)規(guī)則

defineModel 也支持和 defineProps 類似的配置：

<script setup>
const modelValue = defineModel({
  type: String,
  default: 'Hello Vue3',
  required: true
})
</script>

這樣可以確保綁定的值有默認(rèn)值，也能做一些簡(jiǎn)單的類型校驗(yàn)。

五、defineModel的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

• 極簡(jiǎn)寫法 —— 不用再寫 props + emit。
• 語(yǔ)義清晰 —— 一眼就能看出這是 v-model 綁定的值。
• 支持多 v-model —— 寫起來(lái)比原生的 props + emit 更直觀。

缺點(diǎn)

• 只在 Vue3.3+ 可用，老版本不支持。
• 對(duì)于復(fù)雜的業(yè)務(wù)邏輯，可能還是需要 props + emit 來(lái)處理更靈活的場(chǎng)景。

六、適用場(chǎng)景

• 表單類組件（輸入框、選擇器、彈窗開關(guān)等）。
• 需要多個(gè) v-model 的復(fù)雜組件（如富文本編輯器：v-model:value、v-model:config）。
• 需要簡(jiǎn)化組件寫法的場(chǎng)景。

七、總結(jié)

defineModel 是 Vue3.3 之后提供的一個(gè)語(yǔ)法糖，它讓我們?cè)谧咏M件中使用 v-model 更加簡(jiǎn)潔高效：

• 不需要再寫 props 和 emit。
• 可以直接定義一個(gè)響應(yīng)式變量和父組件雙向綁定。
• 支持類型、默認(rèn)值、多 v-model。

如果你項(xiàng)目的 Vue 版本在 3.3 以上，強(qiáng)烈推薦用起來(lái)！

到此這篇關(guān)于Vue3 新特性defineModel用法如何讓 v-model 寫法更優(yōu)雅的文章就介紹到這了,更多相關(guān)vue defineModel 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論