1. The Plant ($el)
A plant can act on itself. $el refers to the very element the directive is on. It's for direct, self-contained manipulation.
Code Example:
<button @click="grow($el)">...</button>2. The Tools ($refs)
The gardener needs specific tools to work on specific plants. $refs lets you access any named element within your component.
Gardener's Shed
The Flowerbeds
🌹
Rose
🍅
Tomato
🌳
Bonsai
Code Example:
<span x-ref="rose">...</span>
<button @click="useTool('water', 'rose')">...</button>3. The Garden ($root)
Sometimes you need to affect the entire garden at once. $root refers to the top-level element of the entire component.
Change the season of the whole garden:
Code Example:
<div x-data="gardenManager">
<button @click="changeSeason('summer')">
</div>