Vue.js Vue提供+；在同一组件上注入

我想将

provide

和

inject

传递给一个“page section”组件，该组件可以使用

插槽递归地包含自己

目标是让这些“页面部分”组件中的每一个都传递其
id
，该id在传递的其余id（由
/
分隔）之后串联，以创建所有包含组件的路径

其中一些“页面部分”还可能包含其他类型的组件

这就是我尝试失败的原因：

 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
      }
    }
  });

Vue.component（'text-input'{
道具：['text'，'id']，
模板：'您可以定义为prop，而不是在开始时注入

你们需要使用函数来提供上下文，我相信


Vue.component（'text-input'{
道具：['text'，'id']，
模板：“”，
注入：['sectionPath']
});
Vue.component（'page-section'{
模板：“”，
道具：{
身份证：{
类型：字符串，
必填项：true
}
截面路径：{
类型：字符串，
要求：正确，
默认值：'/'
}
}
提供（）{
返回{
sectionPath:this.sectionPath+'/'+this.id
}
}
})；
使用函数形式提供修复了我的问题。谢谢