title: Vue provide+inject on the same component
body: <p>I would like to pass <code>provide</code> and <code>inject</code> to a "page-section" component that could contain itself recursively using a <code>slot</code>.</p>
  
  <p>The goal is for each one of these "page-section" components to pass its <code>id</code> concatenated after the rest of the passed down ids (separated by <code>/</code>) to create a path of all the containing components.</p>
  
  <p>Some of the these "page-section" could also contain other types of components.</p>
  
  <p>This is what I was trying unsuccessfully:</p>
  
  <pre><code> Vue.component('text-input', {
        props: ['text', 'id'],
        template: '&lt;input type="text" :value="text"',
        inject: ['sectionPath']
      });
  
      Vue.component('page-section', {
        props: ['id'],
        template: '&lt;div&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;',
        inject: {
          sectionPath: { default: '/' }
        },
        provide: {
          sectionPath: this.sectionPath + '/' + this.id
        }
      }
    });
  </code></pre>