Provide / Inject ​

Truyền Thông Tin Bằng Props ​

Thường, khi chúng ta cần truyền dữ liệu từ cha đến một thành phần con, chúng ta sử dụng props. Tuy nhiên, hãy tưởng tượng trường hợp mà chúng ta có một cây thành phần lớn và một thành phần lồng sâu cần một thông tin từ một thành phần tổ tiên xa xôi. Chỉ với props, chúng ta sẽ phải truyền cùng một prop qua toàn bộ chuỗi cha:

Chú ý rằng mặc dù thành phần <Footer> có thể không quan tâm đến những prop này chút nào, nhưng nó vẫn cần khai báo và truyền chúng đi chỉ để <DeepChild> có thể truy cập. Nếu có một chuỗi cha dài hơn, nhiều thành phần khác nhau sẽ bị ảnh hưởng trên đường đi. Điều này được gọi là "truyền thông tin bằng props" và chắc chắn không phải là điều dễ chịu để xử lý.

Chúng ta có thể giải quyết vấn đề truyền thông tin bằng props bằng cách sử dụng provide và inject. Một thành phần cha có thể là một nhà cung cấp phụ thuộc cho tất cả con cháu của nó. Bất kỳ thành phần nào trong cây con, bất kể có sâu đến đâu, đều có thể chèn (inject) các phụ thuộc được cung cấp bởi các thành phần ở trên nó trong chuỗi cha.

Provide ​

<script setup>
import { provide } from 'vue'

provide(/* key */ 'message', /* value */ 'hello!')
</script>

import { provide } from 'vue'

export default {
  setup() {
    provide(/* key */ 'message', /* value */ 'hello!')
  }
}

import { ref, provide } from 'vue'

const count = ref(0)
provide('key', count)

export default {
  provide: {
    message: 'hello!'
  }
}

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    // sử dụng cú pháp hàm để chúng ta có thể truy cập `this`
    return {
      message: this.message
    }
  }
}

Cung Cấp Ở Cấp Ứng Dụng ​

Ngoài việc cung cấp dữ liệu trong một thành phần, chúng ta cũng có thể cung cấp ở cấp ứng dụng:

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* key */ '

message', /* value */ 'hello!')

Cung cấp ở cấp ứng dụng sẽ có sẵn cho tất cả các thành phần được hiển thị trong ứng dụng. Điều này đặc biệt hữu ích khi viết plugins, vì các plugin thường không thể cung cấp giá trị bằng cách sử dụng thành phần.

Chèn Dữ Liệu ​

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // giá trị được chèn
  }
}

export default {
  inject: ['message'],
  data() {
    return {
      // dữ liệu ban đầu dựa trên giá trị được chèn
      fullMessage: this.message
    }
  }
}

[Ví dụ đầy đủ về provide + inject](https://play.vuejs.org/#eNqNkcFqwzAQRH9l0EUthOhuRKH00FO/oO7B2JtERZaEvA4F43+vZCdOTAIJCImRdpi32kG8h7A99iQKobs6msBvpTNt8JHxcTC2wS76FnKrJpVLZelKR39TSUO7qreMoXRA7ZPPkeOuwHByj5v8EqI/moZeXudCIBL30G0VNBS11VeyogD2StTwvldbZH0Bv0pBvKi3FIKlvFGcxEJ8r7nPWLlm3h5e6ik9yrrU/MFR8cdYrRno2xrk88/77KInS8xR8T8yt37jqD+aVebA7qHsFb+fPz3H8Xy

Đặt Tên Chèn ​

Khi sử dụng cú pháp mảng cho inject, các thuộc tính được chèn được hiển thị trên thể hiện thành phần bằng cùng một khóa. Trong ví dụ trên, thuộc tính được cung cấp dưới khóa "message", và được chèn là this.message. Khóa cục bộ là giống như khóa chèn.

Nếu chúng ta muốn chèn thuộc tính bằng cách sử dụng một khóa cục bộ khác, chúng ta cần sử dụng cú pháp đối tượng cho tùy chọn inject:

export default {
  inject: {
    /* khóa cục bộ */ localMessage: {
      from: /* khóa chèn */ 'message'
    }
  }
}

Ở đây, thành phần sẽ xác định một thuộc tính được cung cấp với khóa "message", và sau đó hiển thị nó như là this.localMessage.