Fix vuejs#1868, slots now work inside a div

Author: Richard Browning

Diff for: packages/create-instance/create-component-stubs.js

@@ -77,15 +77,8 @@ function getScopedSlotRenderFunctions(ctx: any): Array<string> {
   // In Vue 2.6+ a new v-slot syntax was introduced
   // scopedSlots are now saved in parent._vnode.data.scopedSlots
   // We filter out _normalized, $stable and $key keys
-  if (
-    ctx &&
-    ctx.$options &&
-    ctx.$options.parent &&
-    ctx.$options.parent._vnode &&
-    ctx.$options.parent._vnode.data &&
-    ctx.$options.parent._vnode.data.scopedSlots
-  ) {
-    const slotKeys: Array<string> = ctx.$options.parent._vnode.data.scopedSlots
+  if (ctx && ctx.$vnode && ctx.$vnode.data && ctx.$vnode.data.scopedSlots) {
+    const slotKeys: Array<string> = ctx.$vnode.data.scopedSlots
     return keys(slotKeys).filter(
       x => x !== '_normalized' && x !== '$stable' && x !== '$key'
     )
@@ -94,6 +87,7 @@ function getScopedSlotRenderFunctions(ctx: any): Array<string> {
   return []
 }
 
+
 export function createStubFromComponent(
   originalComponent: Component,
   name: string,

Diff for: test/resources/components/component-with-v-slot-syntax-nested.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <ComponentWithVSlot>
+      <template v-slot:newSyntax>
+        <p class="new-example">new slot syntax</p>
+      </template>
+    </ComponentWithVSlot>
+  </div>
+</template>
+
+<script>
+import ComponentWithVSlot from './component-with-v-slot.vue'
+
+export default {
+  name: 'ComponentWithVSlotSyntaxNested',
+
+  components: { ComponentWithVSlot }
+}
+</script>

Diff for: test/specs/shallow-mount.spec.js

@@ -9,6 +9,8 @@ import ComponentWithLifecycleHooks from '~resources/components/component-with-li
 import ComponentWithoutName from '~resources/components/component-without-name.vue'
 import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue'
 import ComponentWithVSlotSyntax from '~resources/components/component-with-v-slot-syntax.vue'
+import ComponentWithVSlotSyntaxNested from '~resources/components/component-with-v-slot-syntax-nested.vue'
+import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue'
 import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue'
 import RecursiveComponent from '~resources/components/recursive-component.vue'
 import { vueVersion } from '~resources/utils'
@@ -128,6 +130,20 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     )
   })
 
+  it('renders SFC with named slots with v-slot syntax nested in a div', () => {
+    const wrapper = shallowMount(ComponentWithVSlotSyntaxNested)
+
+    expect(wrapper.find(ComponentWithVSlot).exists()).toEqual(true)
+    expect(wrapper.find('.new-example').exists()).toEqual(true)
+    expect(wrapper.html()).toEqual(
+      '<div>\n' +
+        '  <componentwithvslot-stub>\n' +
+        '    <p class="new-example">new slot syntax</p>\n' +
+        '  </componentwithvslot-stub>\n' +
+        '</div>'
+    )
+  })
+
   it('renders SFC with named slots with v-slot syntax', () => {
     const wrapper = shallowMount(ComponentWithVSlotSyntax)