Does it work with functional (stateless) components

[chadananda]

My display blocks are way too complicated to be performant without being a stateless functional component. I'm having trouble getting this scroller working and I'm wondering if that is why.

Also, even if I could get it working, how could I emit events to a listener? I don't think I can use an event bus with a functional component.

[tangbc]

Does your work situation like #185 ?

Or does your situation have to manager item inner state ?

[tangbc]

What stateless item component in this library is not strictly functional component, just does't suitable for manager item component's own data .

[chadananda]

Not like #185. My component is "functional" or stateless. Vue functional components are very fast but have no internal state. They have some weird characteristics like not taking attributes. Mine is several levels of nested functional components -- very complicated but no need for internal state, just emitting clicks on various items.

I'll try to wrap my item in a regular stateful component wrapper to see if that is the problem

[tangbc]

OK, if any problem, please show error or warning outputs.

[chadananda]

I got it basically working with a light functional wrapper. But there seems no way to bubble up the (edlistener) event when using a stateless component. I don't think an event bus can work with a stateless component.

<template functional> 
<block-editor :block="props.source"
   :selectiontoken="props.selectiontoken" 
   :isadmin="props.isadmin" 
    @edlistener="edlistener" 
></block-editor>
</template>

<script> 
import Vue from 'vue'
import blockEditor from '~/components/block_edit/editor'
Vue.component("blockEditor", blockEditor) 

export default {
}
</script>

[tangbc]

If functional component not convenient to bubble up event, why not abandon it?

[chadananda]

It's dramatically faster to render and lower memory footprint. The component is very complicated so I need the extra 30% speed. And it's not a problem to bubble up events normally. Just vue-virtual-scroll-list is not passing the listener through. I should be able to do this:

<virtual-list ref="scroller"
      :size="300" :remain="5" :keeps="10" data-key="id" 
      :data-sources="block_array" :data-component="blockComponent" 
      @edlistener="edlistener"
      :extra-props="{selectiontoken:selectionToken, isadmin:isAdmin}"
></virtual-list>

[tangbc]

That's confused becasue virtual-list doesn't know what and how many listeners should be passed through.

If event-bus not available (why?), try to pass a function via extra-props that item component can call to parent.

[chadananda]

I was not able to figure out how one would access the event bus from a functional component. However, passing a function reference in the extra props seems like a perfectly good solution. Thanks for the suggestion.