快捷導航

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

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

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

前言

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

基本用法：v-model 與 defineModel

在 Vue 3 中，v-model 默認會綁定組件的 modelValue 屬性，并通過 update:modelValue 事件實現(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 的簡化寫法

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

子組件

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

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

說明

defineModel：無需手動定義 props 和 emits，自動處理 modelValue 和 update:modelValue。
父組件的 v-model 會自動綁定到 model 變量。

自定義 v-model 屬性名

除了默認的 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 會自動映射為 title 變量。

等價于：

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

多個 v-model 綁定

在同一個組件中，可以綁定多個 v-model 屬性，defineModel 支持多個綁定，分別處理不同的數(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>

說明

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

組合 v-model 與額外屬性

在組件中，v-model 可以和其他屬性同時使用。例如，可以為輸入框添加占位符等額外 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>