Estoy construyendo un formulario (una página de afeitar). Hay dos componentes SelectList , uno depende del otro (ver más abajo).

Si bien los componentes se definieron explícitamente en la página del formulario con alpine.js conectado a través de cdn, el controlador de eventos productIdChanged podía acceder al contexto SelectList (tenía acceso a sus métodos disabled disable() , enable() ).

Desde que cambié a webpack , el contexto del controlador de eventos productIdChanged cambió a Window .

¿Cómo hacer que estos dos se comuniquen? Planeé que SelectList fuera lo más genérico y reutilizable posible.

 <!-- this SelectList dispatches the event with product id --> <div x-data="SelectList({ dispatchOnChange: true })" x-bind="ComponentRoot"> <select x-ref="SelectInput" name="productId" id="ProductsList"> <!-- ...options... --> </select> </div> <!-- this SelectList is expected to respond to the product id change --> <div x-data="SelectList({ eventHandlers: [ { name: 'productIdChanged', handler: function(e) { console.log([e, this]); // reset and then disable this select } } ] })" x-bind="ComponentRoot"> <select x-ref="SelectInput" name="quantityUnitId" id="QuantityUnitsList"> <!-- ...options... --> </select> </div>

Aquí está la definición del componente SelectList , es un contenedor de selección .

 function SelectList({ customClass = '', searchable = false, dispatchOnChange = false, eventHandlers = [] } = {}) { return { init() { // assign event handlers eventHandlers.forEach(eh => { this.ComponentRoot[`@${eh.name}.window`] = eh.handler; }); // configure selectr this.selectr = new Selectr(this.$refs.SelectInput, { ...customClass, searchable }); // dispatch select value dispatchOnChange && this.selectr.on('selectr.change', (item) => { this.$dispatch(`${this.$refs.SelectInput.name}Changed`, { id: item.value }); }); }, reset() { this.selectr.setValue(''); }, disable() { this.selectr.disable(); }, enable() { this.selectr.enable(); }, // used for x-bind ComponentRoot: { }, }; }