@ryangjchandler/alpine-parent NPM

✨ Help support the maintenance of this package by sponsoring me.

Alpine `$parent`

Access parent components using a handy $parent magic variable.

GitHub tag (latest by date) Build size Brotli

This package only supports Alpine v3.x.

About

This plugin provides a new $parent magic property that allows you to interact with a parent component's data object directly. This is useful when you have nested components and conflicting property names but would still like to access the parent properties / methods directly.

Installation

CDN

Include the following <script> tag in the <head> of your document, just before Alpine.

<script
    src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-parent@1.x.x/dist/cdn.min.js"
    defer
></script>

NPM

npm install @ryangjchandler/alpine-parent

Add the $parent directive to your project by registering the plugin with Alpine.

import Alpine from "alpinejs";
import Parent from "@ryangjchandler/alpine-parent";

Alpine.plugin(Parent);

window.Alpine = Alpine;
window.Alpine.start();

Usage

Access the $parent property in your component:

<div x-data="{ value: 'foo }">
    <div x-data="{ value: 'bar' }">
        My value is <span x-text="value"></span> and my parent's value is <span x-text="$parent.value"></span>
    </div>
</div>

The $parent property returns a Proxy, so any updates to the properties should be reactive. This means you'll be able to use it inside of x-model, etc.

Versioning

This projects follow the Semantic Versioning guidelines.

License

Licensed under the MIT license, see LICENSE.md for details.

@everything-registry/sub-chunk-798 @zalastax/nolb-_ryang @infinitebrahmanuniverse/nolb-_ryang

1.0.0

2 years ago

Alpine $parent