Asset support for functional components

[gabriel4649]

What problem does this feature solve?

Functional components with templates allow users to improve performance without sacrificing readability or ease of use. However, currently these do not support the "components" option. This limits this feature a lot, to a very limited set of use cases.

What does the proposed API look like?

Simply support the components option just like non-functional components

[c01nd01r]

Also, how to call methods and emit events in functional components with templates?

[posva]

You cannot, you use a regular component if you need that

[scottbedard]

Support for local directives would be awesome!

And @c01nd01r if you need to respond to an action, you can use plain old functions

// event handler
function onClick(context, e) {
    console.log('you clicked the div');

    // to emit an event, look at the listeners in your context
    if (context.listeners.click) {
        context.listeners.click(e);
    }
}

// component
export default {
    functional: true,
    render(h, context) {
        return <div onClick={e => onClick(context, e)}>click me</div>;
    },
};

[c01nd01r]

Yes, @scottbedard, thank you. I know about this, but I can't do it in a "functional" html template.

<template functional>
  <div>
    <button @click="$emit('click')">Emit click</button> <!-- error -->
    <button @click="logClick">Log click</button> <!-- ??? -->
  </div>
</template>

<script>
  import { logClick } from 'logg';
</script>

[scottbedard]

Yea, that would be great. Right now we can't really expose things to our template in a clean way. The only technique I thought of, was a prop with a default value. This works, but it looks terrible in my opinion, and unnecessary bloats the component's API.

[miljan-aleksic]

@yyx990803, are there any plans ahead about supporting local directives with functional components? It would allow, among others, to convert some more advanced components as functional where those features could be replaced by directives.

I assume there are some technical limitations about it but would like to know if it's planned, what it requires, etc. So I can at least know why I must keep using normal components, for now.

[privatenumber]

I opened a PR for supporting components in functional-components (#8143). I opened a separate issue regarding making methods accessible in functional-components (#8142); can open a PR if the feature request gets approved.