快捷導(dǎo)航

詳解vue3?defineModel如何實(shí)現(xiàn)雙向綁定

更新時(shí)間：2024年12月23日 10:41:44 作者：頭發(fā)禿頭小寶貝

隨著?Vue?3.3?引入的?defineModel?宏,開發(fā)者可以更加簡(jiǎn)潔地實(shí)現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定,下面就跟隨小編一起來學(xué)習(xí)一下如何使用defineModel實(shí)現(xiàn)雙向綁定吧

前言

Vue 3.4 版本中，v-model 的雙向綁定機(jī)制得到了進(jìn)一步優(yōu)化。隨著 Vue 3.3 引入的 defineModel 宏，開發(fā)者可以更加簡(jiǎn)潔地實(shí)現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定。本文將詳細(xì)講解 v-model 的基本用法、自定義屬性名、多個(gè)模型綁定以及 defineModel 的實(shí)際應(yīng)用。

基本用法：v-model 與 defineModel

在 Vue 3 中，v-model 默認(rèn)會(huì)綁定組件的 modelValue 屬性，并通過 update:modelValue 事件實(shí)現(xiàn)父子組件之間的雙向數(shù)據(jù)傳遞。

使用 v-model 的傳統(tǒng)寫法

父組件

<template>
  <ChildComponent v-model="value" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const value = ref('Hello Vue 3');
</script>

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

<template>
  <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
</script>

使用 defineModel 的簡(jiǎn)化寫法

從 Vue 3.3 開始，子組件可以使用 defineModel 宏簡(jiǎn)化上述代碼。

子組件

<template>
  <input type="text" v-model="model" />
</template>

<script setup>
const model = defineModel();
</script>

說明

defineModel：無(wú)需手動(dòng)定義 props 和 emits，自動(dòng)處理 modelValue 和 update:modelValue。
父組件的 v-model 會(huì)自動(dòng)綁定到 model 變量。

自定義 v-model 屬性名

除了默認(rèn)的 modelValue，Vue 3 支持自定義 v-model 的屬性名。在 defineModel 中也可以傳遞參數(shù)來自定義綁定的屬性名稱。

示例

父組件

<template>
  <ChildComponent v-model:title="titleValue" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const titleValue = ref('Default Title');
</script>

子組件

<template>
  <input type="text" v-model="title" />
</template>

<script setup>
const title = defineModel('title');
</script>

說明

自定義屬性名：通過 defineModel('title')，將 v-model:title 綁定到 title 變量。
父組件中的 v-model:title 會(huì)自動(dòng)映射為 title 變量。

等價(jià)于：

<ChildComponent :title="titleValue" @update:title="titleValue = $event" />

多個(gè) v-model 綁定

在同一個(gè)組件中，可以綁定多個(gè) v-model 屬性，defineModel 支持多個(gè)綁定，分別處理不同的數(shù)據(jù)模型。

示例

父組件

<template>
  <ChildComponent v-model:title="titleValue" v-model:content="contentValue" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const titleValue = ref('My Title');
const contentValue = ref('This is content');
</script>

子組件

<template>
  <div>
    <input type="text" v-model="title" placeholder="Title" />
    <textarea v-model="content" placeholder="Content"></textarea>
  </div>
</template>

<script setup>
const title = defineModel('title');
const content = defineModel('content');
</script>

說明

每個(gè) defineModel 都可以定義一個(gè)獨(dú)立的綁定屬性。
父組件通過 v-model:title 和 v-model:content 分別綁定不同的屬性。

組合 v-model 與額外屬性

在組件中，v-model 可以和其他屬性同時(shí)使用。例如，可以為輸入框添加占位符等額外 props。

示例

父組件

<template>
  <ChildComponent v-model="value" placeholder="Please enter" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const value = ref('');
</script>

子組件

<template>
  <input type="text" v-model="model" :placeholder="placeholder" />
</template>

<script setup>
const model = defineModel();
defineProps({
  placeholder: String, // 接收額外屬性
});
</script>

說明

v-model 綁定了 model，實(shí)現(xiàn)雙向數(shù)據(jù)綁定。
placeholder 是普通的 props，可以提供額外功能。

總結(jié)

v-model 的新特性

默認(rèn)綁定 modelValue 與 update:modelValue 事件，簡(jiǎn)化父子組件間數(shù)據(jù)綁定。
支持自定義屬性名，如 v-model:title，靈活綁定多個(gè)數(shù)據(jù)。
支持多個(gè) v-model，在同一組件中綁定多個(gè)屬性。
defineModel 宏提供了更簡(jiǎn)潔的寫法，自動(dòng)處理 props 和 emits。
可以與普通屬性結(jié)合使用，增強(qiáng)組件的擴(kuò)展性。

使用 defineModel 的好處

代碼更加簡(jiǎn)潔，減少模板與腳本中的重復(fù)代碼。
提高可維護(hù)性，避免手動(dòng)管理 props 和 emits。
提供了靈活的雙向綁定方式，支持自定義屬性名和多個(gè)模型。

通過合理使用 defineModel 和 v-model，Vue 3.4 提供了更現(xiàn)代化、優(yōu)雅的組件雙向綁定解決方案。

到此這篇關(guān)于詳解vue3 defineModel如何實(shí)現(xiàn)雙向綁定的文章就介紹到這了,更多相關(guān)vue3 defineModel雙向綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: