Creazione di un componente Web Lightning personalizzato indipendente

Creazione e mappatura dei dati all'interno dell'elemento LWC personalizzato

Costruire ulteriori nodi JSON di dati nell'elemento LWC personalizzato e passare i valori dall'elemento ai nuovi nodi JSON utilizzando l'evento omniaggregate.

1. Creare una funzione di aggregazione personalizzata e impostare l'evento omniaggregate su una variabile.
   Esempio:

   customAggregate() {
       const eventName = 'omniaggregate'
   }

2. Creare una variabile per memorizzare i dati di input dell'elemento LWC.
   Esempio:

   customAggregate() {
       const eventName = 'omniaggregate'
       const data = {
           anyKeyName : 'myElementData'
       };
   }

3. Costruire un oggetto mappando i dati ai dati chiave e il nome di un elemento all'ElementalId chiave.

   customAggregate() {
       const eventName = 'omniaggregate' 
       const data = {
           anyKeyName : 'myElementData'
       };
       const detail = {
           data: data,
           elementId: 'elementName2'
       };
   }

4. (Facoltativo) Nell'oggetto dettaglio, includere la coppia chiave-valore aggregateOverride: true per ignorare tutti i dati esistenti nell'elemento LWC personalizzato.

   customAggregate() {
       const eventName = 'omniaggregate' 
       const data = {
           anyKeyName : 'myElementData'
       };
       const detail = {
           data: data,
           elementId: 'elementName2',
           aggregateOverride: true
       };
   }

5. Creare un nuovo oggetto evento che passa l'evento Omniaggregazione e un oggetto contenente le seguenti quattro proprietà:
   • bolle: Un valore booleano che determina se l'evento viene riportato in bolla nel DOM.
   • annullabile: Un valore booleano che determina se l'evento è annullabile.
   • composto: Un valore booleano che determina se l'evento può passare attraverso il confine ombra.
   • dettaglio: Dati passati nell'evento.
   Esempio:

   omniAggregate() {
       const eventName = 'omniaggregate' 
       const data = {
           anyKeyName : 'myElementData'
       };
       const detail = {
           data: data,
           elementId: 'elementName2'
       };
       const myEvent = new CustomEvent(eventName, {
           bubbles: true,
           cancelable: true,
           composed: true,
           detail: detail,
       });
   }

6. Chiamare this.dispatchEvent() e passare l'oggetto evento come parametro.

   Esempio di codice	Esempio di risultato JSON dei dati
   // code to call omniAggregate() { const eventName = 'omniaggregate' const data = { anyKeyName : 'myElementData' }; const detail = { data: data, elementId: 'elementName2' }; const myEvent = new CustomEvent(eventName, { bubbles: true, cancelable: true, composed: true, detail: detail, }); this.dispatchEvent(myEvent); }	"CustomLWC12": { "elementName1": { "prop": "prop1" }, "elementName2": { "anyKeyName": "myElementData" } }