A brief discussion on the implementation principle of Vue slot

<!-- Subcomponent comA -->
<template>
  <div class='demo'>
    <slot><slot>
    <slot name='test'></slot>
    <slot name='scopedSlots' test='demo'></slot>
  </div>
</template>
<!-- Parent component -->
<comA>
  <span>This is the default slot</span>
  <template slot='test'>This is a named slot</template>
  <template slot='scopedSlots' slot-scope='scope'>This is a scoped slot (old version) {{scope.test}}</template>
  <template v-slot:scopedSlots='scopeProps' slot-scope='scope'>This is a scoped slot (new version) {{scopeProps.test}}</template>
</comA>

<div id='app'>
  <test>
    <template slot="hello">
      123
    </template>
  </test>
</div>
<script>
  new Vue({
    el: '#app',
    components:
      test: {
        template: '<h1>' +
          '<slot name="hello"></slot>' +
          '</h1>'
      }
    }
  })
</script>

{
  tag: 'test',
  scopedSlots: { // scope slot // slotName: ASTNode,
    // ...
  }
  children: [
    {
      tag: 'template',
      // ...
      parent: parentASTNode,
      children: [ childASTNode ], // slot content child node, i.e. text node 123
      slotScope: undefined, // Scope slot binding value slotTarget: "\"hello\"", // Named slot name slotTargetDynamic: false // Is it a dynamically bound slot// ...
    }
  ]
}

with(this){
  return _c('div',{attrs:{"id":"app"}},
  [_c('test',
    [
      _c('template',{slot:"hello"},[_v("\n 123\n ")])],2)
    ],
  1)
}

{
  tag: 'div',
  parent: undefined,
  data: { // Store VNode configuration items attrs: { id: '#app' }
  },
  context: componentContext, // component scope elm: undefined, // real DOM element children: [
    {
      tag: 'vue-component-1-test',
      children: undefined, // The component is the smallest unit of the page, and the slot content is parsed in the child component parent: undefined,
      componentOptions: { // Component configuration item Ctor: VueComponentCtor, // Component construction method data: {
          hook: {
            init: fn, //Instantiate component calling method insert: fn,
            prepatch: fn,
            destroy: fn
          },
          scopedSlots: { //Scope slot configuration item, used to generate scope slot VNode
            slotName: slotFn
          }
        },
        children: [ // Component slot node tag: 'template',
          propsData: undefined, // props parameters listeners: undefined,
          data: {
            slot: 'hello'
          },
          children: [ VNode ],
          parent: undefined,
          context: componentContext // parent component scope // ...
        ] 
      }
    }
  ],
  // ...
}

{
  tag: 'h1',
  parent: undefined,
  children: [
    {
      tag: 'slot',
      slotName: "\"hello\"",
      // ...
    }
  ],
  // ...
}

// Rendering method with(this){
  return _c('h1',[ _t("hello") ], 2)
}

// Source code path: vue-dev\src\core\instance\render-helpers\render-slot.js
export function renderSlot (
  name: string,
  fallback: ?Array<VNode>,
  props: ?Object,
  bindObject: ?Object
): ?Array<VNode> {
  const scopedSlotFn = this.$scopedSlots[name]
  let nodes
  if (scopedSlotFn) { // scoped slot
    props = props || {}
    if (bindObject) {
      if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {
        warn(
          'slot v-bind without argument expects an Object',
          this
        )
      }
      props = extend(extend({}, bindObject), props)
    }
    //Scope slot, get slot VNode
    nodes = scopedSlotFn(props) || fallback
  } else {
    // Get the slot normal slot VNode
    nodes = this.$slots[name] || fallback
  }

  const target = props && props.slot
  if (target) {
    return this.$createElement('template', { slot: target }, nodes)
  } else {
    return nodes
  }
}

<!-- demo -->
<div id='app'>
  <test>
      <template slot="hello" slot-scope='scope'>
        {{scope.hello}}
      </template>
  </test>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        components:
            test: {
                data () {
                    return {
                        hello: '123'
                    }
                },
                template: '<h1>' +
                    '<slot name="hello" :hello="hello"></slot>' +
                  '</h1>'
            }
        }
    })

</script>

with (this) {
        return _c('div', {
            attrs: {
                "id": "app"
            }
        }, [_c('test', {
            scopedSlots: _u([{
                key: "hello",
                fn: function(scope) {
                    return [_v("\n " + _s(scope.hello) + "\n ")]
                }
            }])
        })], 1)
    }

<div id='app'>
<!-- <test>-->
<!-- <template slot="hello">-->
<!-- 123-->
<!-- </template>-->
<!-- </test>-->
</div>
<script>
  new Vue({
    // el: '#app',
    render (createElement) {
      return createElement('test', [
        createElement('h3', {
          slot: 'hello',
          domProps: {
            innerText: '123'
          }
        })
      ])
    },
    components:
      test: {
        render(createElement) {
          return createElement('h1', [ this.$slots.hello ]);
        }
        // template: '<h1>' +
        // '<slot name="hello"></slot>' +
        // '</h1>'
      }
    }
  }).$mount('#app')
</script>

<div id='app'>
<!-- <test>-->
<!-- <span slot="hello" slot-scope='scope'>-->
<!-- {{scope.hello}}-->
<!-- </span>-->
<!-- </test>-->
</div>
<script>
  new Vue({
    // el: '#app',
    render (createElement) {
      return createElement('test', {
        scopedSlots:{
          hello: scope => { // In the parent component rendering method, the final converted scope slot method is consistent with this writing method return createElement('span', {
              domProps: {
                innerText: scope.hello
              }
            })
          }
        }
      })
    },
    components:
      test: {
        data () {
          return {
            hello: '123'
          }
        },
        render (createElement) {
          // The scope slot parent component passes a function, which needs to be called manually to generate a VNode
          let slotVnode = this.$scopedSlots.hello({ hello: this.hello })
          return createElement('h1', [ slotVnode ])
        }
        // template: '<h1>' +
        // '<slot name="hello" :hello="hello"></slot>' +
        // '</h1>'
      }
    }
  }).$mount('#app')

</script>