为什么未声明的 props 不传递给组件的根元素？答案

【问题标题】：Why do not undeclared props pass to the components's root element?为什么未声明的 props 不传递给组件的根元素？
【发布时间】：2020-08-25 17:17:56
【问题描述】：

我围绕 Vuetify 的 'v-dialog' 组件制作了一个名为 'Modal' 的包装器，并希望通过它传递道具：

<template>
  <v-dialog
    class="modal"
    max-width="600"
    v-on="vDialogListeners"
  >
    <v-card>
      <v-card-title class="headline">
        <slot></slot>
      </v-card-title>
    <v-card>
      ...
  </v-dialog>
</template>

我这样使用它（'value' prop）：

<Modal
  :value="showModal"
  :confirm="true"
  @close="onModalClose"
  @click:outside="onModalClose(false)">
Are you sure you'd like to log out?
</Modal>

我知道 $attrs，如果我明确地绑定它，它就会起作用，即 v-bind="$attrs" 在 <v-dialog> 开始标记内。

我的问题：为什么默认不工作，没有明确的v-bind="$attrs"，如果<v-dialog>是组件的根元素并且应该接受组件中未声明的所有道具，或者我错了，误解了这部分的文件？我曾经认为v-bind="$attrs" 仅用于inheritAttrs: false 的情况，以便将未声明的道具传递给组件的非根元素（嵌套元素）。

我有一个猜测：也许，它默认只涉及组件根 html 元素（例如，输入标签）。

【问题讨论】：

因此，如果您没有 value 属性定义，它将落在 Modal 的 attrs 中而不是 props 中。
好的，谢谢。看来我弄清楚了它的正确用法。默认情况下，它会将这些“$attrs”作为属性添加到 DOM 元素中；通过显式绑定，我可以将它们传递给必要的子组件；通过设置inheritAttrs = false，我取消了向DOM元素添加属性的默认行为。

标签： vue.js vuetify.js

【解决方案1】：

看来我已经弄清楚了它的正确用法。默认情况下，它会将这些 $attrs 作为属性添加到 DOM 元素中。通过显式绑定，我可以将它们传递给必要的子组件。通过设置inheritAttrs = false，我取消了向 DOM 元素添加属性的默认行为。因此，我可以结合这些选项来获得合适的行为。

【讨论】：