Cách thêm hỗ trợ `v-model` vào các thành phần Vue.js tùy chỉnh
Chỉ thịv-model là một trong số ít các chỉ thị đi kèm với Vue.js. Chỉ thị này cho phép liên kết dữ liệu hai chiều giữa dữ liệu và chế độ xem của ta .Với liên kết dữ liệu hai chiều, khi ta cập nhật dữ liệu thông qua các trường đầu vào hoặc các điều khiển khác, ta có thể sửa đổi DOM mà không cần phải thực hiện công việc DOM.
Trong bài viết này, bạn sẽ khám phá cách hoạt động của chỉ thị này và sử dụng nó cho các thành phần của bạn .
Cách v-model hoạt động nội bộ
Từ kiến thức về HTML, ta biết rằng input , select , textarea là những cách chính ta cung cấp dữ liệu cho ứng dụng của bạn .
Để v-model hoạt động, nó mong đợi phần tử hoặc thành phần được đề cập nhận được một giá trị (mặc định là giá trị) và cũng phát ra một sự kiện (mặc định là đầu vào.)
Tùy thuộc vào phần tử, Vue quyết định cách lắng nghe và xử lý dữ liệu. Đối với các phần tử input , bạn có thể sử dụng v-model như sau:
<input v-model="email" /> v-model nghĩa là:
<input :value="email" @input="e => email = e.target.value" /> Vue sử dụng phần mở rộng này để xử lý textarea , select và một số kiểu input khác.
Đối với các node radio và hộp kiểm, Vue sử dụng chỗ dựa checked và lắng nghe sự kiện change của chúng.
Đối với các phần tử như thẻ select và hộp kiểm có thể chấp nhận nhiều giá trị, Vue sẽ tự động trả về một mảng các giá trị đã chọn.
Cách thêm v-model vào các thành phần tùy chỉnh
Để cho phép thành phần hỗ trợ ràng buộc hai chiều v-model , thành phần cần chấp nhận một value hỗ trợ và phát ra một sự kiện input .
Hãy tạo một thành phần mẫu có tên là basic-input . Ta sẽ sử dụng thành phần file duy nhất của Vue:
<template> <input @input="handleInput" /> </template> <script> export default { prop: ['value'], data () { return { content: this.value } }, methods: { handleInput (e) { this.$emit('input', this.content) } } } </script> Để hỗ trợ v-model , thành phần chấp nhận một value hỗ trợ và phát ra một sự kiện input .
Sử dụng thành phần như sau:
<basic-input v-model="email" /> Tùy chỉnh chống đỡ và sự kiện mô hình v
Hãy tiến thêm một bước nữa. Ta có thể không muốn sử dụng sự kiện mặc định và hỗ trợ cần thiết để thêm hỗ trợ v-model vào các thành phần . Rất may, Vue cho phép ta tùy chỉnh nó.
Để tùy chỉnh sự kiện và hỗ trợ, ta thêm thuộc tính model vào thành phần của bạn và xác định các giá trị mới như sau:
export default { prop: ['hidden'], model: { prop: 'hidden', event: 'blur' } methods: { handleInput (value) { this.$emit('blur', value) } } } Lần này, khi bạn sử dụng thành phần như thế này:
<basic-input v-model="email" /> Vue sẽ tự động chuyển đổi nó thành:
<basic-input :hidden="email" @blur="e => email = e.target.value" /> Với điều này tại chỗ, bạn có thể tránh xung đột khi xác định sự kiện và chỗ dựa của thành phần của bạn.
Sử dụng v-model trên ContentEditable
Phần tử có thể chỉnh sửa nội dung là một div hoặc phần tử tương tự có thể được cấu hình để hoạt động như một đầu vào.
Ta xác định các yếu tố có thể chỉnh sửa nội dung bằng cách thêm contenteditable thuộc tính nguyên tố:
<div class="editor" contenteditable="contenteditable"></div> Bạn sẽ sử dụng các phần tử có thể chỉnh sửa nội dung cho trình chỉnh sửa WYSIWYG vì chúng dễ làm việc hơn và được hỗ trợ bởi một lượng lớn trình duyệt .
v-model sẽ hoạt động trên các phần tử có thể chỉnh sửa nội dung, nhưng bạn cần sử dụng rõ ràng nội dung của phần tử, nếu không nội dung sẽ không được phát ra.
Để phát ra nội dung, bạn cần lấy innerText hoặc innerHTML của div . Vì vậy, phương thức updateInput cần trông như thế này
updateInput () { this.$emit('input', this.$el.innerText) } Bạn cũng có thể sử dụng nội dung của một ref thay vì nội dung của phần tử root .
Với điều này, v-model sẽ hoạt động cho các phần tử có thể chỉnh sửa nội dung. Bạn cũng có thể cập nhật this.content trong phương thức updateInput .
Kết luận
Đến đây bạn đã thấy cách sử dụng v-model với các thành phần Vue tùy chỉnh, hãy xây dựng hoặc cấu trúc lại các thành phần yêu cầu sử dụng v-model .
Các tin liên quan
