Implement bi-directional data flow

[tipiirai]

As per this discussion in Reddit Nue should support $emits or similar to implement bi-directional data flow.

[tipiirai]

Still unsure if this feature should be part of the controller piece on the MVC model. Is there a good example for $emits that would show why this feature is absolutely necessary?

[AStasyK]

I cannot give you a specific example, and coming from Vue I'm a little bit biased towards 'emits'. But for me it's clean logic - a child's component responsible only for it's thing. If some event happens, it sends a 'signal' and then the responsibility is on the parent component, and it can do anything with this information. I maybe lack experience with callback props, but the idea seems messy to me.

[tipiirai]

Callbacks sound great! JS developers are super familiar with them and they won't introduce any new, proprietary idioms. Why don't you like them?

[ericxin1982]

Hi @tipiirai

I have the same question, the $emit or customization event handler is useful, like child to invoke parent event, or two component communication, these cases $emit is good to use.

Thanks Eric Xin

[tipiirai]

I see the use case for $emits but I'd like to understand how they are better than a callback function. For example:

<!-- parent -->
<div>
  
  <!-- callback method given as argument -->
  <child :callback={ callme }/>

  <script>
    // this callback method is called when child button is pressed
    callme(message) {
      console.info('Child said:' + message)
    }
  </script>
</div>

<!-- child -->
<button @name="child" @click="callback('Hey there')">
  Do something
</button>

This reads well to me and feels like "normal" javascript programming without framework specific idioms.

[wangnan0916]

I see the use case for $emits but I'd like to understand how they are better than a callback function. For example:

<!-- parent -->
<div>
  
  <!-- callback method given as argument -->
  <child :callback={ callme }/>

  <script>
    // this callback method is called when child button is pressed
    callme(message) {
      console.info('Child said:' + message)
    }
  </script>
</div>

<!-- child -->
<button @name="child" @click="callback('Hey there')">
  Do something
</button>

This reads well to me and feels like "normal" javascript programming without framework specific idioms.

@tipiirai Indeed, this looks simpler and purer.

[wangnan0916]

$emit is equivalent to the callback function, why not use the callback function directly? Why add a layer of $emit in the middle?

[wangnan0916]

$emit is equivalent to the callback function, why not use the callback function directly? Why add a layer of $emit in the middle?

Besides the different interface, I can't think of any differences between them. Or what benefits does $emit provide?

[tipiirai]

Glad to hear that! Noticed a bug that prevents callbacks from functioning currently. Will fix the issue and document this as the recommended way to do bi-directional data flow in Nue. Unless I hear solid counter arguments on this thread.

[ericxin1982]

@tipiirai Thanks for the good discussion. I'd like to know whether @ this symbol can bind a customized event name there. I saw your excample, :callback actually points to a click event, but emit can fire any customized event name, and when fire the customized event with arguments, that is great.

If Nue also has emit, and bidirectional, that is much better.

Thanks Eric Xin

[tipiirai]

@ericxin1982 I see your point: $emit is indeed more flexible. To see the point even better, can you name a good example component / use-case, where $emit is a must and makes cleaner code than callbacks?

[ericxin1982]

I think this feature is good to have in a great product. https://www.w3schools.com/vue/vue_emit.php Like two different component communication, and parent call child event or reversely child call parent event, that is useful.

https://www.educba.com/postgresql-notify/ From Postgresql notifiy feature, you can imagine as listener and requestor, inside the ecomsystem.

I recommend nue this great product should have emit or like alpinejs can dispatch custom event. https://alpinejs.dev/essentials/events#dispatching-custom-events

Thanks Eric Xin

[tipiirai]

Worth noticing that app router was released yesterday:

https://nuejs.org/docs/concepts/client-side-navigation.html#application-router

Which tackles some of the same issues as dispatching (emitting events).

Anyway, this issue is still on my mind but with a low priority. Thought this would be simple, but found it extremely hard to bind the callback to the correct instance where this variable would work correctly.