feat: support scopedSlots mounting option for functional component (#893

)
vuejs · Aug 3, 2018 · 7a04ff4 · 7a04ff4
1 parent 73980c4
commit 7a04ff4
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/packages/create-instance/create-functional-component.js b/packages/create-instance/create-functional-component.js
@@ -3,6 +3,7 @@
 import { throwError } from 'shared/util'
 import { validateSlots } from './validate-slots'
 import { createSlotVNodes } from './create-slot-vnodes'
+import createScopedSlots from './create-scoped-slots'
 
 export default function createFunctionalComponent (
   component: Component,
@@ -15,11 +16,15 @@ export default function createFunctionalComponent (
     validateSlots(mountingOptions.slots)
   }
 
+  const data = mountingOptions.context ||
+    component.FunctionalRenderContext || {}
+  data.scopedSlots = createScopedSlots(mountingOptions.scopedSlots)
+
   return {
     render (h: Function) {
       return h(
         component,
-        mountingOptions.context || component.FunctionalRenderContext,
+        data,
         (mountingOptions.context &&
           mountingOptions.context.children &&
           mountingOptions.context.children.map(

diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js
@@ -88,6 +88,50 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
     }
   )
 
+  itDoNotRunIf(
+    vueVersion < 2.5,
+    'mounts component scoped slots in render function which exists in functional component',
+    () => {
+      const destructuringWrapper = mountingMethod(
+        {
+          functional: true,
+          render: function (createElement, context) {
+            return context.data.scopedSlots.default({
+              index: 1,
+              item: 'foo'
+            })
+          }
+        },
+        {
+          scopedSlots: {
+            default:
+              '<template slot-scope="{ index, item }"><p>{{index}},{{item}}</p></template>'
+          }
+        }
+      )
+      expect(destructuringWrapper.html()).to.equal('<p>1,foo</p>')
+
+      const notDestructuringWrapper = mountingMethod(
+        {
+          functional: true,
+          render: function (createElement, context) {
+            return context.data.scopedSlots.named({
+              index: 1,
+              item: 'foo'
+            })
+          }
+        },
+        {
+          scopedSlots: {
+            named:
+              '<p slot-scope="foo">{{foo.index}},{{foo.item}}</p>'
+          }
+        }
+      )
+      expect(notDestructuringWrapper.html()).to.equal('<p>1,foo</p>')
+    }
+  )
+
   itDoNotRunIf(
     vueVersion < 2.5,
     'mounts component scoped slots',