Question

我正在尝试构建一个步进器组件，该步进器将向子组件公开step，以便它可以显示某些内容。但是，子组件未收到step。

子组件：

<template>
  <v-stepper v-model="e1">
    <v-stepper-header>
      <template v-for="i in steps.length">
        <v-stepper-step
          :key="`${i}-step`"
          :complete="e1 > i"
          :step="i"
          complete-icon="$vuetify.icons.check"
        >
          {{steps[i-1].text}}
        </v-stepper-step>

        <v-divider
          v-if="i < steps.length"
          :key="i"
        ></v-divider>
      </template>
    </v-stepper-header>

    <v-stepper-items>
      <v-stepper-content
        v-for="(step, i) in steps"
        :key="`$step_content_${i}`"
        :step="i+1"
      >
        {{step}}
        <slot :step="step"></slot>
        <v-btn
          v-if="i+1 < steps.length"
          color="primary"
          @click="nextStep"
          :disabled="step.disabled"
        >
          {{$t('conditions.stepper_continue')}}
        </v-btn>
        <v-btn
          :disabled="e1 < 2"
          @click="prevStep"
          flat>
          {{$t('conditions.stepper_back')}}
        </v-btn>
      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>
</template>

父母：

<StepperComp v-if="mode !=='list'" :steps="steps">
  <template v-if="mode !== 'list'" scoped-slot="step">
    {{step}}
  </template>
</StepperComp>

我遇到以下错误：

属性或方法“ step”未在实例上定义，但在渲染过程中被引用。

为什么父级无法从作用域插槽访问step？

Answer 1

您似乎误拼了slot-scope（您错误地使用了scoped-slot）。另外，属性值是作用域数据的 object ，因此您必须在该对象内引用step：

<template slot-scope="scopeData">
  {{ scopeData.step }}
</template>

<!-- or use object destructuring -->
<template slot-scope="{ step }">
  {{ step }}
</template>

从Vue 2.6.0开始，实际上不赞成使用上述语法，因此您应该迁移到新的推荐语法：

<template v-slot="scopeData">
  {{ scopeData.step }}
</template>

<!-- or use object destructuring -->
<template v-slot="{ step }">
  {{ step }}
</template>

<!-- or v-slot shorthand: https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand -->
<template #default="{ step }">
  {{ step }}
</template>

vue作用域插槽未暴露

1 个答案: