Subscribe on changes!

Allow to pass defined event to parent

avatar
May 28th 2022

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 }})