Vue 3传递数组警告：无关的非props属性已传递给组件但无法自动继承

Question

拜托，我正在学习 VueJS 3，我可能有初学者问题。我在浏览器开发者控制台中发出了这样的警告：

\n

\n

消息是：

\n

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\n

\n

我正在将对象数组传递给子组件。在我的父views/Home.vue组件中，我有这样的实现：

\n

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\n

\n

在子组件中components/ItemProperties.vue我有以下代码：

\n

<template>\n  <div class="wrapper">\n    <section v-for="(item, index) in items" :key="index" class="box">\n      <ItemProperties class="infobox-item-properties" :info="item.properties" />\n    </section>\n  </div>\n</template>\n<script>\nimport { ref } from \'vue\'\nimport { data } from \'@/data.js\'\nimport ItemProperties from \'@/components/ItemProperties.vue\'\n\nexport default {\n  components: {\n    ItemDescription,\n  },\n  setup() {\n    const items = ref(data)\n\n    return {\n      items,\n    }\n  },\n</script>\n

\n

default()我有没有功能并不重要。v-if我有没有条件也没关系。如果数组中有循环，我会收到此警告

\n

数据在data.js文件中。文件的部分在这里：

\n

<template>\n  <div class="infobox-item-property" v-for="(object, index) in info" :key="index">\n    <span class="infobox-item-title">{{ object.name }}:</span>\n    <span v-if="object.type === \'rating\'">\n      <span v-for="(v, k) in object.value" :key="k">{{ object.icon }}</span>\n    </span>\n    <span v-else>\n      <span>{{ object.value }}</span>\n    </span>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    info: {\n      type: Array,\n      required: false,\n      default: () => [\n        {\n          name: \'\',\n          value: \'\',\n          type: \'string\',\n          icon: \'\',\n        },\n      ],\n    },\n  },\n}\n</script>\n

\n

PS：应用程序有效，但我担心该警告。我能做什么，请喜欢正确的方式？

\n

我很乐意提供任何建议。非常感谢。

\n

Answer 1

嗯，我认为错误消息非常清楚。

您的ItemProperties.vue组件正在渲染片段- 因为它正在<div>使用v-for. 这意味着没有单根元素。

同时，您将 a 传递class给组件<ItemProperties class="infobox-item-properties"-class只能放置在 HTML 元素上。如果将其放置在 Vue 组件上，Vue 会尝试将其放置在该组件正在渲染的内容的根元素上。但是因为你的组件渲染的内容没有根元素，Vue 不知道把它放在哪里......

要删除警告，请删除class="infobox-item-properties"或将内容包装ItemProperties到单个<div>.

上述机制称为Fallthrough Attributes（“非 prop 属性”Vue 2 文档）。很高兴知道可以关闭这种自动继承这种自动继承，这允许您自己将这些属性应用到您选择的除根元素之外的元素（或组件）上（这样做也可以消除错误消息）。

这非常有用。最值得注意的是，当围绕标准 HTML 元素（如输入或按钮）或某些库组件设计专门的包装器时 - 您可以告诉“这是一个按钮 - 您可以放置​​标准<button>接受的任何内容，它将起作用”，而无需将所有标准<button>属性重新定义为 props你的包装纸

Answer 2

该ItemProperties组件有多个根节点，因为它在根中呈现一个带有v-for.

根据类名 ( infobox-item-properties)，我认为您希望将该类应用于容器元素，因此一个简单的解决方案是div在组件的根目录中添加该元素（例如 a ）：

// ItemProperties.vue
<template>
  <div>
    <section v-for="(item, index) in items" :key="index" class="box">
    ...
    </section>
  </div>
</template>

演示

Answer 3

您还可以通过执行以下操作来防止传递子组件中的属性：

export default defineComponent({
  name: "ChildComponentName",
  inheritAttrs: false // This..
})

来源： https: //vuejs.org/guide/components/attrs.html