• Khi cần truyền data từ component cha xuống component con/ cháu. Ngoài việc sử dụng Props thì ta còn có thể sử dụng Provide/Inject
• Ưu điểm: truyền data thẳng từ component GrandParent xuống Child mà không phải qua Parent

// Tai component GrandParent
import { computed } from 'vue'

export default {
  data() {
    return {
      messageData: 'hello!'
    }
  },
  provide() {
    return {
      // explicitly provide a computed property
      message: computed(() => this.messageData)
    }
  }
}

// tai component Child
export default {
  // object syntax is required
  // when declaring default values for injections
  inject: {
    messageChild: {
      from: 'message', // this is optional if using the same key for injection
      default: 'default value'
    },
    user: {
      // use a factory function for non-primitive values that are expensive
      // to create, or ones that should be unique per component instance.
      default: () => ({ name: 'John' })
    }
  }
}

Vue SFC Playground