1,scope部分,其实就是在父元素里,以方法的形式,提前注册好光的slot,或者带scope的slot
    $slots: 获取子组件的插槽的内容,预留作为children,父组件获取内容的时候,直接

    ,相当于在render里如下这个插槽,this.$slots获取到是实际包含的具名和默认插槽,例如的内容,回填进去。

    1. createElement(
    2. 'div', [
    3. '第三个组件,测试在组件中定义slot, ',
    4. ...this.$slots.testslot
    5. ]
    6. )

    $scopeSlot: 在slot上绑定v-bind内容,等待slot-scope调用,

    相当于

    1. createElement(
    2. 'div', [
    3. this.$scopedSlots.default({
    4. text: this.message
    5. })
    6. ]
    7. )

    这在子组件上先提供prop,即bind的内容,然后在使用指定插槽时,通过props获取scope内容

    1. scopedSlots: {
    2. default: function(props) {
    3. return createElement('span', props.text)
    4. }
    5. }

    2,在jsx中的表现

    1. <UploadList
    2. disabled={this.uploadDisabled}
    3. listType={this.listType}
    4. files={this.uploadFiles}
    5. on-remove={this.handleRemove}
    6. handlePreview={this.onPreview}>
    7. {
    8. (props) => {
    9. if (this.$scopedSlots.file) {
    10. return this.$scopedSlots.file({
    11. file: props.file
    12. });
    13. }
    14. }
    15. }
    16. </UploadList>

    这个是整合了 uploadlist的upload组件,在upload层次上定义一个插槽 ,这是elementUI文档没记录的插槽,在使用upload组件的可以用插槽显示当前file文件。