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

Posted 2023-03-16

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

【英文标题】：How is Vue automatically adding properties to my q-input within a custom component I created?

【发布时间】：2021-12-21 15:44:09

【问题描述】：

我在这个项目中使用 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 添加属性，因为它是我组件中唯一的元素？这样做似乎很奇怪，但我不知道发生了什么。

提前感谢您对此的任何回答。

【问题讨论】：

如果您的子组件中有一个根元素，并且您在父组件中向它添加属性，那么它将直接传递给您的第一个元素，在这种情况下是一个 q-input。

所有非props属性都由组件的根元素继承，除非你在组件选项中使用inheritAttrs: false，更多关于vuejs.org/v2/api/#inheritAttrs

非常感谢！您能否回复为答案，以便我将其标记为正确？

【参考方案1】：

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

当组件返回单个根节点时，非prop属性会自动添加到根节点的属性中

和

如果不希望组件自动继承属性，可以在组件的选项中设置inheritAttrs: false。

对于多个根组件：

与单根节点组件不同，具有多个根节点的组件没有自动属性失效行为。