Vue3一個組件綁定多個 v-model，自定義 prop 和 event 名稱
Vue3中v-model默認使用modelValue作為prop，update:modelValue作為事件，而Vue2使用的是value和input。此外，Vue3允許通過參數的方式為組件添加多個v-model綁定，例如v-model:title和v-model:description，每個都可以對應不同的prop和事件。
例一
一個簡單的雙綁定
多個v-model綁定，比如用戶信息和權限設置。子組件接收兩個v-model，如userName和isAdmin，然后在子組件內部使用modelValue和對應的update事件。不過這里可能需要使用不同的參數，比如v-model:userName和v-model:isAdmin，然后子組件的props應該是userName和isAdmin，事件則是update:userName和update:isAdmin。
基礎用法 - 用戶信息組件
ChildComponent.vue
<template><div><input :value="userName" @input="$emit('update:userName', $event.target.value)"><inputtype="checkbox":checked="isAdmin"@change="$emit('update:isAdmin', $event.target.checked)"></div>
</template><script setup>
defineProps(['userName', 'isAdmin']);
defineEmits(['update:userName', 'update:isAdmin']);
</script><!-- 父組件使用 -->
<!-- <UserForm v-model:user-name="userData.name" v-model:is-admin="userData.adminStatus"
/> -->
例二
一個自定義事件名稱
例子可以涉及自定義prop和事件名稱，但根據Vue3的文檔，實際上通過v-model的參數就可以直接指定prop和事件，不需要額外配置。例如，v-model:title="pageTitle"會自動使用title作為prop，update:title作為事件
自定義參數 - 分頁組件
Pagination.vue
<template><div><button @click="$emit('update:currentPage', currentPage - 1)">上一頁</button><span>{{ currentPage }}/{{ totalPages }}</span><button @click="$emit('update:currentPage', currentPage + 1)">下一頁</button></div>
</template><script setup>
defineProps(['currentPage', 'totalPages']);
defineEmits(['update:currentPage']);
</script><!-- 父組件使用 -->
<!-- <Pagination v-model:current-page="page" :total-pages="totalPages"
/> -->
注意:在
Vue3中，每個v-model綁定默認對應一個prop和update事件，因此自定義名稱實際上是通過v-model的參數來實現的。例如，v-model:userName對應prop userName和事件update:userName。
例三
更復雜的對象傳遞，比如綁定整個對象，需要使用計算屬性的getter和setter
對象參數 - 顏色選擇器
ColorPicker.vue
<template><input type="color" :value="color" @input="$emit('update:color', $event.target.value)"><inputtype="range":value="opacity"@input="$emit('update:opacity', $event.target.value)"min="0"max="1"step="0.1">
</template><script setup>
defineProps({color: String,opacity: Number
});
defineEmits(['update:color', 'update:opacity']);
</script><!-- 父組件使用 -->
<!-- <ColorPicker v-model:color="style.color" v-model:opacity="style.opacity"
/> -->
關鍵點總結：
- 使用
v-model:參數名 語法實現多個綁定 - 子組件通過
defineProps接收參數 - 通過
update:參數名 事件觸發更新 - 參數名會自動轉換為
kebab-case（如userName → user-name） - 支持任意數量的
v-model綁定 - 可以組合使用普通
props和v-model參數
)
