Support for methods in functional component + template

[privatenumber]

What problem does this feature solve?

There is no way for me to use functions in a functional template.

While I can declare methods outside the scope of the functional-component definition and access it within the render method (Snippet 1), I cannot access it when I use a functional template (Snippet 2).

Snippet 1:

<script>
function emit(listeners, eventName, ...args) {
	const eventHandler = listeners[eventName];
	if (typeof eventHandler === 'function') {
		eventHandler(...args);
	}
}

const comp = {
	functional: true,

	render(h, ctx) {
		return h('a', {
			attrs: {
				href: '#',
			},
			on: {
				click: emit(ctx.listeners, 'open'),
			},
		}, ['Link']);
	},
};

export default comp;
</script>

Snippet 2: Doesn't work

<template functional>
	<a
		href="#"
		@click="emit(listeners, 'open')"
	>
		Link
	</a>
</template>

<script>
function emit(listeners, eventName, ...args) {
	const eventHandler = listeners[eventName];
	if (typeof eventHandler === 'function') {
		eventHandler(...args);
	}
}

const comp = {
	functional: true,
};

export default comp;
</script>

What does the proposed API look like?

<template functional>
	<a
		href="#"
		@click="methods.emit(listeners, 'open')"
	>
		Link
	</a>
</template>

<script>
const comp = {
	functional: true,
	methods: {
		emit(listeners, eventName, ...args) {
			const eventHandler = listeners[eventName];
			if (typeof eventHandler === 'function') {
				eventHandler(...args);
			}
		},
	},
};

export default comp;
</script>

[yunfong]

Vue functional component it define as a stateless component. In this case, it is not applicable to functional components , you can pack it into a stateful component .

[privatenumber]

@yunfong
This is a feature request asking for functional/state-less components to support the methods obj. Not a question on how to use methods in functional components...

And to add, making functions accessible via the functional-template doesn't make the component stateful.

I'm happy to open a PR when the FR is approved.

[posva]

Could you open the issue in vue loader instead, please?

[privatenumber]

@posva
This would be a change in core.

It's just adding the methods object to the component and context so there's no compilation step necessary.

The template should be able to access the methods with a syntax like this:
@click="methods.methodName()"