feat: pass listeners to functional components (#1036)

vuejs · Nov 24, 2018 · 7a1a49e · 7a1a49e
1 parent 0d3e46d
commit 7a1a49e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 16 deletions.
diff --git a/packages/create-instance/create-functional-component.js b/packages/create-instance/create-functional-component.js
@@ -16,15 +16,26 @@ export default function createFunctionalComponent (
     validateSlots(mountingOptions.slots)
   }
 
-  const data = mountingOptions.context ||
-    component.FunctionalRenderContext || {}
-  data.scopedSlots = createScopedSlots(mountingOptions.scopedSlots)
+  const context =
+    mountingOptions.context ||
+    component.FunctionalRenderContext ||
+    {}
+
+  const listeners = mountingOptions.listeners
+
+  if (listeners) {
+    Object.keys(listeners).forEach(key => {
+      context.on[key] = listeners[key]
+    })
+  }
+
+  context.scopedSlots = createScopedSlots(mountingOptions.scopedSlots)
 
   return {
     render (h: Function) {
       return h(
         component,
-        data,
+        context,
         (mountingOptions.context &&
           mountingOptions.context.children &&
           mountingOptions.context.children.map(

diff --git a/test/specs/mounting-options/listeners.spec.js b/test/specs/mounting-options/listeners.spec.js
@@ -8,21 +8,48 @@ import {
 import { itDoNotRunIf } from 'conditional-specs'
 
 describeWithShallowAndMount('options.listeners', mountingMethod => {
-  itDoNotRunIf(isRunningPhantomJS, 'handles inherit listeners', () => {
-    if (!listenersSupported) return
-    const aListener = () => {}
-    const wrapper = mountingMethod(
-      compileToFunctions('<p :id="aListener" />'),
-      {
-        listeners: {
-          aListener
+  itDoNotRunIf(
+    isRunningPhantomJS || !listenersSupported,
+    'handles inherit listeners', () => {
+      const aListener = () => {}
+      const wrapper = mountingMethod(
+        compileToFunctions('<p :id="aListener" />'),
+        {
+          listeners: {
+            aListener
+          }
         }
+      )
+
+      expect(wrapper.vm.$listeners.aListener.fns).to.equal(aListener)
+    })
+
+  itDoNotRunIf(
+    isRunningPhantomJS || !listenersSupported,
+    'passes listeners to functional components', () => {
+      const TestComponent = {
+        render (h, ctx) {
+          ctx.listeners.aListener()
+          ctx.listeners.bListener()
+          return h('div')
+        },
+        functional: true
       }
-    )
 
-    expect(wrapper.vm.$listeners.aListener.fns).to.equal(aListener)
-    expect(wrapper.vm.$listeners.aListener.fns).to.equal(aListener)
-  })
+      mountingMethod(
+        TestComponent,
+        {
+          context: {
+            on: {
+              bListener () {}
+            }
+          },
+          listeners: {
+            aListener () {}
+          }
+        }
+      )
+    })
 
   itDoNotRunIf(
     vueVersion < 2.5,