Vue js access provide and inject:

The provide and inject pair offers data flow deep in descendant chain.

Ancestor components can serve as dependency injector for all its descendants, regardless how deep the component hierarchy is.

The feature is advertised for advance plugin/component usages.

- Please check below examples for more details

  Vue1 (Main):

 export default {

      provide: {

            return {

  '$vue1': this

             }

     }

  }

 Vue2 (Child):

 export default {

     inject: ['$vue1']

 }

 As described in above example you can now access the $vue1 in Vue2 component using this.$vue1.

You can inject more providers by comma separated as below:

inject: ['$vue1', '$vue2']