Cách thêm hỗ trợ v-model cho Custom Component trong Vue.js (Vue 2 và Vue 3)

Ràng buộc dữ liệu hai chiều (two-way data binding) với directive v-model là một trong những tính năng quen thuộc và mạnh mẽ nhất của Vue.js. Tuy nhiên, khi làm việc với các Custom Component (component tự định nghĩa), bạn cần cấu hình prop và event phù hợp để v-model có thể hoạt động mượt mà. Bài viết này Bitech sẽ hướng dẫn bạn từng bước triển khai trên cả Vue 2 và Vue 3.

1. Hỗ trợ v-model trong Vue 2

Trong Vue 2, khi bạn áp dụng v-model vào một custom component, Vue sẽ ngầm hiểu đây là cú pháp rút gọn của việc truyền một prop tên là value và lắng nghe sự kiện input.

Các bước thực hiện:

1. Khai báo prop value ở component con.
2. Phát ra (emit) sự kiện input khi dữ liệu thay đổi.

Ví dụ với CustomInput.vue (Vue 2):

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

<script>
export default {
  props: ['value']
}
</script>

Sử dụng ở component cha:

<CustomInput v-model="searchText" />

2. Hỗ trợ v-model trong Vue 3

Vue 3 đã tái cấu trúc cú pháp v-model để nhất quán hơn và cho phép liên kết nhiều giá trị. Mặc định trong Vue 3:

• Prop đại diện chuyển thành modelValue (thay vì value).
• Sự kiện kích hoạt chuyển thành update:modelValue (thay vì input).

Các bước thực hiện:

1. Khai báo prop modelValue trong component con.
2. Phát ra sự kiện update:modelValue cùng giá trị mới khi có thay đổi.

Ví dụ với CustomInput.vue (Vue 3 <script setup>):

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

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

Cách gọi ở component cha tương tự như Vue 2:

<CustomInput v-model="searchText" />

3. Tạo nhiều v-model trên cùng một Component (Chỉ Vue 3)

Một cải tiến quan trọng của Vue 3 là khả năng truyền nhiều tham số cho v-model trên cùng một component bằng cách chỉ định tên thuộc tính cụ thể.

Ví dụ triển khai:

<!-- Component con: UserName.vue -->
<script setup>
defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName'])
</script>

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

Sử dụng ở component cha:

<UserName
  v-model:firstName="first"
  v-model:lastName="last"
/>

Tổng kết

• Vue 2: Dùng prop value và emit sự kiện input.
• Vue 3: Dùng prop modelValue và emit sự kiện update:modelValue. Vue 3 cũng hỗ trợ binding nhiều v-model dễ dàng nhờ cú pháp v-model:propName.

Việc hiểu rõ cơ chế hoạt động của v-model giúp bạn thiết kế hệ thống component tái sử dụng (reusable components) một cách chuyên nghiệp và tối ưu hơn.

Ngày phát hành: 18/05/2026
Nguồn: www.digitalocean.com