@ryangjchandler/alpine-parent
v1.0.0
Published
Adds a handy $parent magic property to your Alpine components.
Downloads
225
Readme
✨ 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-parentAdd 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.