Custom Component & Mixins & avoid repeating props

[turigeza]

So …

I was reading this
https://quasar-framework.org/components/building-reusable-components.html
https://forum.quasar-framework.org/topic/696/how-to-building-components-with-quasar

But I was disappointed at this bit:
“But if we wanted to set other properties on the internal QSelect we would have to define all of them on our own component und pass them to QSelect.”
(There is a spelling mistake in there btw: und)

So I was trying to figure out if there is a way to avoid listing each and every single props.

Ended up with this.

<template>
    <q-input
    v-bind="$props"
    v-on="$listeners"
    @keyup.enter="updated()"
    @blur="updated()"
    @keydown.meta.83.prevent="updated()"
    />
</template>

<script>
import { QInput } from 'quasar';

export default {
    mixins: [QInput],
    created: function () {
        console.log(this);
    },
    methods: {
        updated () {
            console.log('updated');
        }
    },
    props: ['rows']
};
</script>

It seem to be working except that I still explicitly had to list the prop 'rows'. And when I check QInput rows is indeed not within the props.
Why is rows not within the props ?

Is there a way not to have to list all the props ? Or am I just asking for trouble doing it this way.

Thank you for the help,

[Hawkeye64]

If a component does not accept a prop, then Vue will keep passing it down until it is accepted. You can see your props in this.$attrs. I recommend reading this article for enlightenment. https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html

[turigeza]

Yes ! Thank you for that link. No need for the mixins and also it is not $props I need but $attrs. Sorry it is kind of ended up to be a question about Vue rather then Quasar.

So the final wrapper QInput for me looks like this

<template>
    <q-input
    :value="value"
    v-on="$listeners"
    v-bind="$attrs"
    @keyup.enter="updated"
    @blur="updated"
    @keydown.meta.83.prevent="updated"
    />
</template>

<script>

export default {
    props: ['value'],
    methods: {
        updated: function () {
            this.$emit('save');
        }
    }
};
</script>
```