As the title of the question,
this context is not available in the functional component. So if I have to emit an event, how can I do that?
For example in below code snippet:
<template functional> <div> <some-child @change="$emit('change')"></some-child> </div> </template>
My functional component doesn’t have
this context and hence
$emit is not available. How can I bubble-up this event?
This is explained in the docs Passing Attributes and Events to Child Elements/Components:
If you are using template-based functional components, you will also have to manually add attributes and listeners. Since we have access to the individual context contents, we can use
data.attrsto pass along any HTML attributes and
listeners(the alias for
data.on) to pass along any event listeners.
At the most basic level, you can delegate all listeners like this:
If you only want to bind the
change listener, you can do:
but this will fail if
listeners.change is undefined/null (not provided to the functional component).
If you need to handle the situation where there is no
change listener, then you can do this:
<some-child @change="listeners.change && listeners.change($event)"></some-child>
otherwise you would have to settle by writing the render function by hand, since I don’t think it is possible to conditionally assign the
change listener to
<some-child> in the template of a functional component. (Or maybe you can? I’m not sure.)