Inheriting Data and emitting Events from/to parent components

[Mtillmann]

Hi, I understand that alpine isn't Vue but I think it would be great if one could bind parent component properties via an attribute similar to x-props="{someKey : propertyOfTheCurrentComponentData}" and likewise call parent component's methods through something like x-on:click="$emit('nameOfParentComponentsMethod', someData)". I am sorry if this has been discussed ad nausea and I am unable to find the discussion. Is this worthwile or should I simply use Vue when I need such features?

I initially posted this in the regular alpine discussion board but i feel it suites here better!

[SimoTod]

Thanks Martin, unfortunately Alpine doesn't give us a way fo define a new directive such as x-prop and this repo is a community project so we don't have control on what it's going to be included in core.
It's not exactly the same but you can achieve a similar result using $parent and $component. Do you think it would be useful for your use case?
Event wise, alpine uses the window object as a communication bus. If the component is a dom ancestor, the event you trigger in a child component will eventually bubble to the parent as well. We can maybe look at supporting a sintax like $component.dispatch or a dispatch-lookalike helper who targets an arbitrary dom element.
Let's see what the other guys think.

[Mtillmann]

Hi Simone, thanks for you reply. I wasn't aware of the technical limitation that prevents adding new directives. Although I am aware that I could use $parent and $component references I felt that explicit property binding might allow for more generic components as you wouldn't have to rely on the naming of a certain parent-property.

Also the events I was thinking about would make more sense if they where bound similar to vue on the component like x-on:some-event-name="someFunctionOfCurrentComponent", then inside the component using x-on:click="$emit('some-event-name')"...

Thanks for taking the time to reply!

[SimoTod]

Yeah, that's already working. I mean x-on creates a listener on your component, the issue is dispatching the event on the right dom element so your x-on can catch it.

The majority of the browser events "bubbles" up to the window object. If you have

<div x-data x-on:custom-event="alert('ack')">
   <div x-data>
        <button @click="$dispatch('custom-event') ">click me</button>
  </div>
</div>

It's already working. Custom-event will go through button, inner div, outer div (triggering your listeners), up to the dom to eventually document and finally window.

The issue is if you want to trigger something on the parent and listen for that event in a child component.

[KevinBatdorf]

Yeah that already works in Alpine core. And if sibling components, you would use the .window modifier, telling the component to listen there.

<div x-data x-on:custom-event.window=""></div>
<div x-data><button @click="$dispatch('custom-event')">click me</button></div>

[smbdelse]

Hello! I'll share my approach for accessing data from x-for loops. Currently I'm using some wrapping element as middle man and keep iterated data globally in Spruce store. It looks like below:

            <template x-for="i in $store['anUniqueID'].length">
                <div data-store="anUniqueID" :data-index="i - 1">
                    /* here is subcomponent injected by framework templating library. */
                </div>
            </template>

The subcomponent gets data on initialization from the store by first obtaining it's ID and index from $el.parentNode.

It's not the most elegant way. The biggest issue here is that subcomponent has to be aware that it's inside iteration.

[HugoDF]

This use case is actually the trickiest to work around, might be worth PR-ing into the Spruce repo/docs cc @ryangjchandler this is a situation where Spruce allows you to do something that is quite hard without it.

[smbdelse]

I can imagine this being done also by using only $parent magic helper.

Another little step that can be done to keep template cleaner is to store UID only on master components DOM node and getting it in child components simply by looking for $el.closest('[uid]').getAttribute('uid').

So the only thing missing is the way to easily pass index to the child.

[smbdelse]

Here I described some another solutions for accessing x-for data:
alpinejs/alpine#793 (comment)