Vue 如何在我创建的自定义组件中自动向我的 q-input 添加属性？

Question

我在这个项目中使用 Vue 3.2.4、Vuex 4.0.1 和 Quasar 3.1.0。

我已经在 vue 中创建了一个自定义组件，如下所示：

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

然后我将它添加到需要一些验证的页面，并在实际将其添加到我的组件之前先发制人地添加了一个 rules 属性，如下所示：

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

真正奇怪的是，lazy-rules 和 rules 属性立即开始应用于我的 robs-input 中的 q-input，而我没有对自定义组件本身进行任何更改。

Vue 是否会自动向 q-input 添加属性，因为它是我组件中的唯一元素？这样做似乎很奇怪，但我不知道还发生了什么。

在此先感谢您对此的任何回答。

Answer 1

这称为非 prop 属性继承（此处文档：https://v3.vuejs.org/guide/component-attrs.html）。重要的部分是：

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

和

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

对于多根组件：

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

Vue 如何在我创建的自定义组件中自动向我的 q-input 添加属性？

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

vue.js

vue-component

vuejs3

quasar-framework

quasar