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中的表现
<UploadListdisabled={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层次上定义一个插槽
