Parent Controller: How to Call a Function from One of Multiple Child Controllers

[cavasinf]

How garage controller can call drive() function from car controller where car id = 2.

<div data-controller="garage">
    <div data-controller="car" data-car-id-value="1"></div>
    <div data-controller="car" data-car-id-value="2"></div>
</div>

garage_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  driveCarWithId(id) {
   // How to call drive()
  }
}

car_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { id: Number }

  drive() {
    console.log(`Car ${this.idValue} is driving`)
  }
}

I've seen the getControllerForElementAndIdentifier function but the doc implies that we should only use it as a in last resort.
So how de we do it with an event? I've tried to dispatch bubbling events from the garage controller, but the car controller doesn't intercept them.

garage_controller.js

this.dispatch('car:handleDrive', {
    bubbles: true,
    detail: {
        id: 2
    }
})

car_controller.js

handleDrive(event) {
  const targetId = event.detail?.id
  if (targetId === this.idValue) {
    this.drive()
  }
}

[rupasix]

Outlets would be helpful here. https://stimulus.hotwired.dev/reference/outlets

Update: If you need event communication from parent to child, bubbling is propably wrong strategy - bubbled event goes from child to parent and ends on window. Capture works in other direction, from window(parent ) to child. In Stim docs i see there is :capture flag for actions, maybe try that: https://stimulus.hotwired.dev/reference/actions

[cavasinf]

Thanks for your answer.

I've seen the outlet documentation, and I thought that was it. However, the documentation says it's an alternative to events.
That's why I searched "How do I... with events?"

The use of Outlets helps with cross-controller communication and coordination as an alternative to dispatching custom events on controller elements.

I don't understand the capture as what I'm trying to do.

A boolean value indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.