How is Vue automatically adding properties to my q-input within a custom component I created?

Question

I'm using Vue 3.2.4, Vuex 4.0.1 and Quasar 3.1.0 for this project.

I have created a custom component in vue as shown below:

<template>
  <q-input outlined v-model="inputValue" :label="label" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'RobsInput',
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: false
    }
  },
  emits: ['input'],
  data: function () {
    return {
      inputValue: (this.value
        ? this.value
        : ''),
      open: false
    }
  },
  mounted() {
    this.$emit('input', this.inputValue);
  },
})
</script>

I was then adding it to a page with some validation needed and pre-emptively added a rules property before actually adding this to my component, as shown here:

<robs-input
      v-model="email"
      label="Email Address"
      lazy-rules
      :rules="[ val => val && val.length > 0 || 'Email Address is Required']" />

What's really strange is that the lazy-rules and rules properties instantly began applying to the q-input inside my robs-input without me making any changes to the custom component itself.

Is Vue automatically adding properties to q-input because it's the only element within my component? Seems strange for it to do that, but I can't figure out what else is happening.

Thanks in advance for any answers to this.

Answer 1

This is called non-prop attribute inheritance (doc here: https://v3.vuejs.org/guide/component-attrs.html). The important sections are:

When a component returns a single root node, non-prop attributes will automatically be added to the root node's attributes

and

If you do not want a component to automatically inherit attributes, you can set inheritAttrs: false in the component's options.

and for multiple roots component:

Unlike single root node components, components with multiple root nodes do not have an automatic attribute fallthrough behavior.