Listening to an event from a custom directive

[Ericlm]

Hello! I'm currently trying to replace a very repetitive pattern with a custom directive, using Vue 3, Composition API, and Typescript.

I often have a component where a CustomButton should open a CustomDialog, both placed in a parent component. For now, I keep listening to the click on the CustomButton just to open the dialog, so I need to create a function, bind it to the click event of the CustomButton, just to call a openDialog on the CustomDialog. As this happen very often, I wanted to create a directive that would be bound to the Button, and with an argument, automatically open the dialog with the attached argument.

To do so, I made the following inside the main.ts:

app.directive(
    'dialog',
    (el: HTMLElement, binding: DirectiveBinding, vnode: VNode) => {
      // Retrieving the dialog with the given ref 
      const dialog: CustomDialog = binding.instance?.$refs[
        binding.arg
      ] as CustomDialog
    }
  )

and setting the directive on my CustomButton like this:

<custom-button
    v-dialog:myBeautifulDialog
  >
    Hello testing directive
  </custom-button>

My issue is : how to listen to the click event emitted by the button, inside the directive, so I could do something like this:

on('click', () => {
    dialog.openDialog()
})

Things to consider:

• I don't want to use addEventListener because it's for JS events, and not for custom vue events (if one day I rename the click event to clonck, it won't work for example)
• The $on is no longer available to listening to vue events, and I don't think that my situation can be managed by props/provide/inject or Pinia stores.

I also should mention that in Cypress, there is a way of passing a custom event listener by props, like so:

const onValiditySpy = cy.spy().as('validitySpy')

cy.mount(CustomInput, {
  attrs: {
    pattern: '[a-z]{9}',
  },
  props: {
    onValidity: onValiditySpy,
  },
})

but I did not find a way to pass props to the binding.instance of the directive.

Any help would be greatly appreciated! 🙂

[Anders2303]

I've run into a similar issue in our project, so I'm also i need of a way to do this.
Our project is currently on Vue2, and we've used a utility directive for logging/tracking events submitted from our components. This directive was using $on to listen run a simple tracking method whenever specified events were emitted, but I've not seen any suggested migration path for doing anything similar in Vue 3, particularly purely within the directive itself

[rodhoward]

Another example of this that I've run into is a v-bubble directive. The directive allows you to bubble custom events from child components up to the parent components. This again relyied on the $on function in order to listen to them.

Now that we can't listen to custom events via javascript I can't see how to re-implement this feature.