Allow to pass defined event to parent

[zorn-v]

What problem does this feature solve?

Imagine wrapper component like this (I have some of them)

<script setup>
import { ref } from 'vue'
import createHash from 'hash-generator'

const emit = defineEmits(['update:modelValue'])
const generated = ref(false)

function generatePassword() {
  generated.value = true
  emit('update:modelValue', createHash(10))
}
</script>

<template>
  <!-- Need to change click:prepend-inner to click:append-inner after vuetify bug fix -->
  <v-text-field
    v-bind="$attrs"
    append-inner-icon="mdi-dice-multiple-outline"
    :type="generated ? 'text' : 'password'"
    @input="generated = false"
    @click:prepend-inner="generatePassword"
    @update:modelValue="emit('update:modelValue', $event)"
  />
</template>

Every time I need to define @update:modelValue="emit('update:modelValue', $event)" on such components what I think is stupid. Because defined events does not pass to parent. If do not define it You got warning (warning is bad) etc. but work like a charm.

What does the proposed API look like?

Maybe something like passthrough: true (need better name) in event definition. Like

const emit = defineEmits({'update:modelValue': { passthrough: true }})

[gianj988]

Hi

I just read your post. If you need custom events propagation through components, I published on NPM a simple plugin, vue 3 compatible, to listen for and emit custom events that propagate "DOM like", with features like, stopPropagation and once. The NPM package link with the documentation is: https://www.npmjs.com/package/vue-events-backbone . In your case i would use it like:

1. define a watcher for the v-model on the VTextField
2. in the watch callback emit the custom event

Note that i would use this only if i need this event to propagate even further. Let me know if my package will be helpful!