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>
Last updated