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, đơn giản là khai báo v-model
cho dữ liệu nào muốn đồng bộ hóa, còn nếu binding một chiều thì dùng v-bind
.
<input v-model="email" />
// hoặc có thể viết
<input :value="email" @input="e => email = e.target.balue" />
v-model
có thể chạy được, element hoặc component gắn nó phải nhận vào một prop (mặc định là value
) và emit một event (mặc định là input
)Tùy thuộc vào element, Vue sẽ dùng xử lý dữ liệu được emit, trên input type là radio , nó sẽ dùng prop checked và event là change.
v-model
cho một component chúng ta tự viết
Thêm Chúng ta sẽ làm một component sử dụng <input />
<template>
<input @input=”handleInput” />
</template>
<script>
export default {
name: "basic-input",
props: {
value
},
data() {
return {
Content: this.value
}
},
methods: {
handleInput(e) {
this.$emit("input", this.content)
}
}
}
</script>
Chỉ cần thêm props value
cho component là chúng ta có thể sử dụng v-model
trên basic-input
<basic-input v-model="email" />
v-model
prop và event
Tùy biến 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" />