vuejs/v2.cn.vuejs.org

关于slot插槽的v-slot指令用法--作用域插槽

Binote opened this issue · 1 comments

文档的写法

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

我的写法

<!-- 基础组件-InputItem -->
  <!-- 其他内容。。。 -->
  <slot name="label"><div class="label">{{label}}</div></slot>
  <!-- 其他内容。。。 -->
<!--  -->


<!-- 父组件-InputList -->
<InputItem v-for="count in 10" :key="count">
  <!-- 其他内容。。。 -->
  <template v-slot:label>
       <slot name="label" v-bind="props"></slot>
  </template>
  <!-- 其他内容。。。 -->
</InputItem>
<!--  -->

<!-- 使用了作用域插槽的地方 -->
<InputList>
  <!-- 其他内容。。。 -->
  <template v-slot:label="slotPropt">
       {{slotPropt}}
  </template>
  <!-- 其他内容。。。 -->
</InputList>
<!--  -->

结果

浏览器控制台输出
[Vue warn]: Property or method "slotProps" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

想法

实际上我认为这个报错实际上是对的,按照指令的语法,slotProps确实是未定义的,因为指令的传参,意义是vue组件实例里面的变量。
这是否是文档的写法或者slot插槽的实现存在某些语法的歧义?
我现在想要知道的是,在这种情况下我该怎么处理?

目前来说,我已经放弃使用v-slot指令,换回slot-scope语法了