1,scope部分,其实就是在父元素里,以方法的形式,提前注册好光的slot,或者带scope的slot
$slots: 获取子组件的插槽的内容,预留作为children,父组件获取内容的时候,直接
createElement(
'div', [
'第三个组件,测试在组件中定义slot, ',
...this.$slots.testslot
]
)
$scopeSlot: 在slot上绑定v-bind内容,等待slot-scope调用,
createElement(
'div', [
this.$scopedSlots.default({
text: this.message
})
]
)
这在子组件上先提供prop,即bind的内容,然后在使用指定插槽时,通过props获取scope内容
scopedSlots: {
default: function(props) {
return createElement('span', props.text)
}
}
2,在jsx中的表现
<UploadList
disabled={this.uploadDisabled}
listType={this.listType}
files={this.uploadFiles}
on-remove={this.handleRemove}
handlePreview={this.onPreview}>
{
(props) => {
if (this.$scopedSlots.file) {
return this.$scopedSlots.file({
file: props.file
});
}
}
}
</UploadList>
这个是整合了 uploadlist的upload组件,在upload层次上定义一个插槽