The $component custom Alpine.js magic property

There is a new version of Alpine.js, and the magic properties API changed. Consider this article outdated.

You can't add new directives to Alpine.js v2, but you can add custom magic properties. You know, the things that start with $, like the $refs, $dispatch.

What caught my attention recently is the $component that allows access to a different component's data. This property is provided by Magic Helpers, a collection of 3rd-party custom magic properties.

So far, the best solution to the global state management in Alpine.js is still Spruce, but using the $component is a viable alternative if you sparingly want to access data from another component.

Here's how it works once you included the library:

<!-- Add the x-id, so you can reference it later -->
<div x-id="user" x-data="{ color: 'yellow' }"></div>

<p x-data>
My favorite color is
<!-- Reference the component by the x-id -->
<span x-text="$component('user').color"></span>

They also provide the conventient $parent shortcut when you have nested components:

<div x-data="{ color: 'yellow' }">
<p x-data>
My favorite color is
<span x-text="$parent.color"></span>