@ryangjchandler/alpine-parent

1.0.0 • Public • Published

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 Monthly downloads via CDN

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

Copyright (c) 2021 Ryan Chandler and contributors

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

Readme

Keywords

none

Package Sidebar

Install

npm i @ryangjchandler/alpine-parent

Weekly Downloads

32

Version

1.0.0

License

none

Unpacked Size

11.2 kB

Total Files

18

Last publish

Collaborators

  • ryangjchandler