Understanding $el, $refs, and $root with an office building analogy.
$el refers to the current element. Think of it as actions you perform on your own desk without leaving your chair.
My Desk
Example Code:
<div x-data="desk()">
<button @click="changeColor">...</button>
</div>
Alpine.data('desk', () => ({
changeColor() {
// this.$el is the <div> with x-data
this.$el.classList.toggle('bg-teal-200');
}
}))
$refs lets you access any element with an x-ref attribute from anywhere inside the component. It's like a central reception sending a memo to a specific, named department.
Reception Control Panel
HR Department
IT Department
Example Code:
<div x-data="officeFloor">
<button @click="sendMemo('hr')">...</button>
<div x-ref="hr">...</div>
</div>
Alpine.data('officeFloor', () => ({
sendMemo(dept) {
// this.$refs.hr points to the <div>
const inbox = this.$refs[dept].querySelector('.inbox');
inbox.innerText = 'New message received!';
}
}))
$root gets the top-level element of the current component. It's like an action in one room (e.g., the break room) affecting the entire floor, like pulling a fire alarm.
Break Room (Nested Component)
Floor Status:
Example Code:
<div x-data="officeFloor">
<div x-data="breakRoom">
<button @click="triggerFireDrill">...</button>
</div>
</div>
Alpine.data('breakRoom', () => ({
triggerFireDrill() {
// this.$root is the officeFloor <div>
this.$root.__x.getUnwrappedData().isFireDrillActive = true;
}
}))
Alpine.store)Waiting for actions...