Question

我想将provide和inject传递给“页面部分”组件，该组件可以使用slot递归包含自身。

目标是让这些“页面部分”组件中的每一个在其余传递的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。

，而不是在开头注入

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

＆＃13;

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

＆＃13;

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

1 个答案: