CBWIRE
v4.x
v4.x
  • Introduction
  • How It Works
  • Getting Started
  • Configuration
  • Releases
    • What's New With 4.1
    • What's New With 4.0
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Resources
  • Upgrading from CBWIRE 3.x
  • Upgrading from CBWIRE 2.x
  • CBWIRE CLI
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Data Binding
    • Actions
    • Events
    • Nesting Components
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Features
    • Single-file Components
    • Alpine.js
    • Lazy Loading
    • Form Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Directives
    • wire:click
    • wire:confirm
    • wire:dirty
    • wire:ignore
    • wire:init
    • wire:key
    • wire:loading
    • wire:model
    • wire:navigate
    • wire:offline
    • wire:poll
    • wire:stream
    • wire:submit
    • wire:transition
  • Advanced
    • Troubleshooting
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. The Essentials

Nesting Components

// wires/ContactUs.cfc
component extends="cbwire.models.Component" {
    data = {
        "showForm": false
    };  
}
<!--- wires/contactus.cfm --->
<cfoutput>
    <div>
        <cfif showForm>
            <!--- Nested component --->
            #wire( name="ContactForm" )#
        </cfif>    
        <button wire:click="$toggle( 'showForm' )">Toggle form</button>
    </div>
</cfoutput>

You can also pass parameters.

// wires/ContactUs.cfc
component extends="cbwire.models.Component" {
    data = {
        "showForm": false,
        "sendEmail": false,
        "validateForm": true
    };  
    
    function onMount( params ) {
        data.sendEmail = params.sendEmail;
        data.validateForm = params.validateForm;
    }
}
<!--- wires/contactus.cfm --->
<cfoutput>
    <div>
        <cfif showForm>
            #wire(
                name="ContactForm"
                params={
                    sendEmail: true,
                    validateForm: true
                }
            )#
        </cfif>
        <button wire:click="$toggle( 'showForm' )">Toggle form</button>    
    </div>
</cfoutput>
PreviousEventsNextLifecycle Methods

Last updated 7 months ago

Was this helpful?