关于slot插槽的v-slot指令用法--作用域插槽
Binote opened this issue · 1 comments
Binote commented
文档的写法
<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插槽的实现存在某些语法的歧义?
我现在想要知道的是,在这种情况下我该怎么处理?
Binote commented
目前来说,我已经放弃使用v-slot指令,换回slot-scope语法了