Hổ trợ v-model trên một custom Vue component

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" />
Nghĩa là để 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.

Thêm v-model cho một component chúng ta tự viết

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" />

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" />

Add v-model Support to Custom Vue.js Component