一、前言

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

二、回顧傳統(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，再手動觸發(fā) update:modelValue。
• 寫起來比較繁瑣，不夠直觀。

三、defineModel的出現(xiàn)

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

子組件（使用defineModel）

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

是不是簡單很多？

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

四、defineModel的進階用法

1. 指定類型

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

這樣在 TS 下會有更好的類型提示。

2. 自定義prop名稱

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

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

父組件這樣用：

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

3. 添加默認值和校驗規(guī)則

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

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

這樣可以確保綁定的值有默認值，也能做一些簡單的類型校驗。

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

優(yōu)點

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

缺點

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

六、適用場景

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

七、總結(jié)

defineModel 是 Vue3.3 之后提供的一個語法糖，它讓我們在子組件中使用 v-model 更加簡潔高效：

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

如果你項目的 Vue 版本在 3.3 以上，強烈推薦用起來！

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

最新評論