Adds a handy $parent magic property to your Alpine components.
npm install @ryangjchandler/alpine-parent> ✨ Help support the maintenance of this package by sponsoring me.
$parentAccess parent components using a handy $parent magic variable.
!GitHub tag (latest by date)
!Build size Brotli
> This package only supports Alpine v3.x.
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.
Include the following
`bash`
npm install @ryangjchandler/alpine-parent
Add the $parent directive to your project by registering the plugin with Alpine.
`js
import Alpine from "alpinejs";
import Parent from "@ryangjchandler/alpine-parent";
Alpine.plugin(Parent);
window.Alpine = Alpine;
window.Alpine.start();
`
Access the $parent property in your component:
`html`
My value is and my parent's value is
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.
This projects follow the Semantic Versioning guidelines.
Copyright (c) 2021 Ryan Chandler and contributors
Licensed under the MIT license, see LICENSE.md for details.