tungbt94 blog

# Vue tip: sync data with child component

Khi code vue có khi nào bạn gặp trường hợp cần pass một value xuống child component và khi ở child component có thay đổi thì parent component cũng cần được update?

Vậy xử lý cách nào đây? Trong bài viết này mình sẽ đưa ra 2 cách xử lý.

# Cách 1: props value, $emit 'input'

Một ví dụ của cách dùng này là input (opens new window) của buefy.

Trong child component ta cần để ý 2 việc:

  • Khai báo 1 props là value. Prop này sẽ tự nhận v-model từ parent component truyền vào. Ví dụ khi dùng input của buefy, các bạn có thể viết v-model hoặc :value, component Input của buefy vẫn nhận như nhau. Nhưng ở đây chúng ta sẽ dùng v-model.
  • Mỗi khi cần parent component sync data từ child component (value chúng ta đã pass qua v-model), chúng ta chỉ cần $emit('input', ...). Chỉ cần emit với event 'input' kèm value mới thì parent component sẽ tự sync.

Để tên prop là value sẽ không clear trong nhiều trường hợp. Vì thế chúng ta có thể đặt lên khác và dùng model như dưới đây:

export default {  
  props: ['price'],
  model: {
    prop: 'price',
    event: 'updatePrice'
  },
}

Cách làm này có thể dùng được từ version >= vue@2.2. Tuy nhiên nhược điểm của nó là sinh ra thêm 1 prop, khá phức tạp trong việc đọc code.

# Cách 2: dùng .sync

Cách này khá đơn giản để thực hiện. Vue document đã nói cho chúng ta cách sử dụng 😄

https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

Với prop cần sync, chúng ta sẽ pass prop với .sync. Ví dụ:

<my-product price.sync="product.price" />

Và trong child component, khi cần update lại product.price ở parent component chúng ta chỉ cần:

$emit('update:price', newPrice)

Đơn giản và dễ hiểu hơn cách 1 đúng không? Tuy nhiên cách này yêu cầu vue@2.3 trở lên nên nhiều project dùng version vue < 2.3 sẽ không dùng được.

Hi vọng bài viết hữu ích với các bạn 😄

← Lazy loading vue component →