diff --git a/packages/create-instance/create-functional-component.js b/packages/create-instance/create-functional-component.js index 61d07aaf9..00f78a696 100644 --- 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 index dcf469542..11487e201 100644 --- 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('

'), - { - listeners: { - aListener + itDoNotRunIf( + isRunningPhantomJS || !listenersSupported, + 'handles inherit listeners', () => { + const aListener = () => {} + const wrapper = mountingMethod( + compileToFunctions('

'), + { + 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,