Vue 在同一个组件上提供+注入

Question

我想将provide 和inject 传递给可以使用slot 递归地包含自身的“page-section”组件。

目标是这些“页面部分”组件中的每一个都将其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
      }
    }
  });

Answer 1

你可以定义为prop，而不是一开始的inject。

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

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