Vue provide+inject on the same component

Question

I would like to pass provide and inject to a "page-section" component that could contain itself recursively using a slot.

The goal is for each one of these "page-section" components to pass its id concatenated after the rest of the passed down ids (separated by /) to create a path of all the containing components.

Some of the these "page-section" could also contain other types of components.

This is what I was trying unsuccessfully:

 Vue.component('text-input', {
      props: ['text', 'id'],
      template: '<input type="text" :value="text"',
      inject: ['sectionPath']
    });

    Vue.component('page-section', {
      props: ['id'],
      template: '<div><slot></slot></div>',
      inject: {
        sectionPath: { default: '/' }
      },
      provide: {
        sectionPath: this.sectionPath + '/' + this.id
      }
    }
  });

Onur Özkan · Accepted Answer · 2018-03-13 06:27:49Z

1

Instead of inject at the beginning, you can define as prop.

And you need to use function for provide to use context i believe.

Vue.component('text-input', {
  props: ['text', 'id'],
  template: '<input type="text" :value="text" />',
  inject: ['sectionPath']
});

Vue.component('page-section', {
  template: '<div><slot></slot></div>',
  props: {
    id: {
      type: String,
      required: true
    }
    sectionPath: {
      type: String,
      required: true,
      default: '/'
    }
  }
  provide () {
    return {
      sectionPath: this.sectionPath + '/' + this.id
    }
  }
});

answered Mar 13, 2018 at 6:27

Onur Özkan

1,0281 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ron Harlev Over a year ago

Using the function form of provide fixed my issue. thanks

Collectives™ on Stack Overflow

Vue provide+inject on the same component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related