$component/$parent- AlpineJS Magic Helpers Demo

component-parent-alpinejs-magic-helpers-demo.markdown

$component/$parent- AlpineJS Magic Helpers Demo

A Pen by Kevin Batdorf on CodePen.

License.

index.html

<div class="min-h-screen p-16 bg-gray-100">

	<!-- Component 1 -->
	<p class="mb-4 font-bold">The child component uses the color name set on the parent in x-text. Click the color name to update the parent component</p>
    <div
        x-data="{ color: 'blue' }"
        class="w-64 h-64 mb-6 flex items-center justify-center"
        :class="`bg-${color}-400`"
        @click="color = color === 'blue' ? 'red' : 'blue'">
		<!-- This p tag is a child component that can react to and set parent data -->
        <p
		  x-data
		  x-text="$parent.color"
		  @click.stop="$parent.color = 'pink'"></p>
    </div>
    
	<!-- Component 2 -->
    <p class="mb-4 font-bold">This component is the same as above, but also watches the third component's color as well</p>
    <div
        x-data="{ color: 'blue' }"
        class="w-64 h-64 mb-6 flex items-center justify-center"
        :class="`bg-${color}-300`"
        @click="color = color === 'blue' ? 'red' : 'blue'">
        <p
            x-data
            x-text="$component('yellowSquare').color"
		    @click.stop="$component('yellowSquare').color = 'pink'"
            :class="`text-${$parent.color}-800`">
        </p>
    </div>

	<!-- Component 3 -->
    <p class="mb-4 font-bold">This watches a non-parent component. It requires adding an id attribute, or an `x-id` attribute so the component can be identified</p>
    <div
        id="yellowSquare"
        x-data="{ color: 'yellow' }"
        class="w-64 h-64"
        :class="`bg-${color}-400`"
        @click="color = color === 'yellow' ? 'green' : 'yellow'">
    </div>
    <p x-data x-text="$component('yellowSquare').color"></p>
	
	
	
	
</div>

scripts

<script src="https://cdn.jsdelivr.net/gh/alpine-collective/alpine-magic-helpers/dist/component.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

style.css

[x-cloak] { display: none; }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />