$el: The Current Room
Analogy: An action performed inside a room that only affects that specific room.
Interactive Demo
Room 101
Status: Ready
How it Works
The button uses $el to refer to itself. We pass $el.parentElement to the function to get the 'room' div and modify it directly.
<!-- The 'room' a level above the button -->
<div class="room-styles">
<p>Status: <span class="status-text">...</span></p>
<button @click="markRoomForCleaning($el.parentElement)">
Mark for Cleaning
</button>
</div>$refs: Named Stations
Analogy: A central paging system that needs to contact specific, named stations around the ward.
Interactive Demo
Central Paging System
Nurse Station
Quiet
Lab Drop-off
Quiet
How it Works
We mark elements with x-ref="name". Then, from anywhere in the component, we can access them using $refs.name.
<!-- The named station -->
<div x-ref="nurseStation">...</div>
<!-- The button that calls it -->
<button @click="pageStation('nurseStation')">...</button>
<!-- The function accesses it -->
<script>
pageStation(stationRef) {
const station = this.$refs[stationRef];
//... manipulate station element
}
</script>$root: The Entire Ward
Analogy: An emergency button that triggers a lockdown, affecting the entire ward (the component's root element).
Interactive Demo
Emergency Controls
Clicking this will put a border around the entire demo area.
How it Works
$root gives you direct access to the component's top-most element (the one with x-data). This is useful for global changes.
<!-- The component root is the "ward" -->
<div x-data="hospitalWard">
<button @click="triggerLockdown()">...</button>
</div>
<!-- The function accesses the root -->
<script>
triggerLockdown() {
this.$root.classList.add('lockdown-style');
}
</script>