✨ Help support the maintenance of this package by sponsoring me.
Alpine $parent
Access parent components using a handy $parent magic variable.
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/[email protected]/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
Copyright (c) 2021 Ryan Chandler and contributors
Licensed under the MIT license, see LICENSE.md for details.
2 Oct 12, 2021
18 Nov 16, 2022
14 Apr 22, 2022
12 Dec 8, 2022
1.3k Dec 4, 2022
6 Aug 24, 2022
1.8k Jan 3, 2023
5 Nov 1, 2022
10 Dec 23, 2022