[Feature Request] Default Emit handler

[DellanX]

I'm trying to create a component that has a fallback option of opening a link in a new tab. And was hoping there would be a way to define such functionality.

Use Case

I have a child element external-link such as:

<template>
  <div>
    <button v-if="preview" @click="openLink">{{ preview }}</button>
    <i-mdi-refresh v-else />
  </div>
</template>
<script setup lang="ts">
const emits = defineEmits<{"open": [url: string]}>();
const props = defineProps<{ url: string }>();
const preview = ref<string|null>(null);
watch(props, (n, c) => {
  if (n.url !== c.url) {
    downloadPreviewAsync().then(r => {
      preview.value = r
    })
  }
});
</script>

I have a parent element such as:

...
<External-Link v-for="link in links" :key="link.id" :url="link.url" />
...

By default, the the 'open' event should open a tab in the browser (which is code I already have for).
But if on the parent component, the developer states @open.prevent="someFunc", the prevent stops a new tab from opening.

The part I cannot do, is specify a handler on the external-link component that gets prevented when the prevent modifier is used.

If this functionality already exists, then I'd change this request to a documentation update request.

[jods4]

What .prevent does is: it calls e.preventDefault() on the first event parameter.

So if you want to use this behavior, you have to pass one such object (maybe custom, maybe just Event) and check if preventDefault() was called after the event was emitted (in case you're using Event, that would be defaultPrevented).

[DellanX]

Okay, that makes a lot of sense. My main dilemma is, how do I access Event on a custom emit?

• For this example, I could technically recycle the event created by @click, but trying to come up with an understanding for a more generic case.

Would this call for creating my own Event class inheriting from Event but also copying over my desired { url: string } data?

• If so, then I'll look into making a composable/macro for my codebase that constructs/destructs these classes. And this Issue could be closed

If an event instance already exists for custom events, I'd like to know how to access it. I didn't see that in the docs

[jods4]

You pass whatever you want to component events, there is no "default" or "built-in" argument:
https://vuejs.org/guide/components/events.html#event-arguments

You can new Event -- or any object of yours with a preventDefault() method -- pass it to emit, then check if default was prevented by a potential listener.

[DellanX]

Yeah, I am familiar with that part.
I'll make a custom type that can handle this situation. Thanks for the information!

Essentially, for my use case, and anyone else searching for this:

1. I'll create a class with MouseEvent as a property and a preventDefault method wrapper, or create a class that is extending Event.
2. I'll add the logic to the created class to define what should happen if preventDefault is not executed.
3. I'll create an instance of the class on my child component, and emit it up to the parent component.
4. If I desire to prevent the default actions of my custom class, I'll add the keyword prevent

Thanks again, I didn't know that all prevent was doing, was executing the preventDefault method with no constraints on the object provided.