Với Vue nó khác với React là data có thể binding two-way, không ràng buộc one-way data flow, chỉ việc khai báo v-model cho dữ liệu nào muốn binding two-way là xong, còn nếu binding một chiều thì dùng v-bind.
<!--Binding two-way-->
<input v-model="email" />
<script>
export default {
data() {
email: 'hello@vuilaptrinh.com'
}
}
</script>Cách viết v-model có thể hiểu là một cách viết tắt của 2 xử lý
- Bind dữ liệu
:value - Gắn sự kiện xử lý khi
@input
Phiên bản đầy đủ không rút gọn được viết lại như sau
<input :value="email" @input="e => email = e.target.value" />Tùy theo element, Vue sẽ xử lý khác nhau trên giá trị được emit, nếu như <input type="radio" />
<input v-model="email" type="radio" />
Phiên bản đầy đủ
<input :checked="email" @change="e => email = e.target.value" />v-model cho một component chúng ta tự viết
<template>
<div class="my-custom">
<input @input="handleInput" />
</div>
</template>
<script>
export default {
props: {
value
},
data() {
return {
content: this.value
}
},
methods: {
handleInput(e) {
this.$emit("input", this.content)
}
}
}
</script>Thêm props value, và emit event input cho component là chúng ta có thể sử dụng v-model
<basic-input v-model="email" />Tùy biến v-model prop và event
Nếu nhu cầu cao hơn, chúng ta có thể không muốn dùng đến các event, prop mặc định để v-model chạy được, để làm được việc ấy, thêm một property cho component tên model
export default {
props: {
tabilu
},
model: {
prop: "tabilu",
event: "blur"
},
methods: {
handleInput (value) {
this.$emit("blur", value);
}
}
}Khi Vue nó gặp component như vầy
<basic-input v-model="email" />Nó sẽ tự độ convert sang
<basic-input :tabilu="email" @blur="e => email = e.target.value" />
Initializing...