Vue 3 passing array warning: Extraneous non-props attributes were passed to component but couldn't be automatically inherited 警告：无关的非道具属性已传递给组件但无法自动继承

Question

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

消息是：

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

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

 <template>
  <div class="wrapper">
    <section v-for="(item, index) in items" :key="index" class="box">
      <ItemProperties class="infobox-item-properties" :info="item.properties" />
    </section>
  </div>
</template>
<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import ItemProperties from '@/components/ItemProperties.vue'

export default {
  components: {
    ItemDescription,
  },
  setup() {
    const items = ref(data)

    return {
      items,
    }
  },
</script>

在子组件中 components/ItemProperties.vue 我有这个代码：

 <template>
  <div class="infobox-item-property" v-for="(object, index) in info" :key="index">
    <span class="infobox-item-title">{{ object.name }}:</span>
    <span v-if="object.type === 'rating'">
      <span v-for="(v, k) in object.value" :key="k">{{ object.icon }}</span>
    </span>
    <span v-else>
      <span>{{ object.value }}</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Array,
      required: false,
      default: () => [
        {
          name: '',
          value: '',
          type: 'string',
          icon: '',
        },
      ],
    },
  },
}
</script>

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

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

 export const data = [
  {
    title: 'White shirt',
    properties: [
      { name: 'Material', value: 'Cotton', type: 'string', icon: '' },
      { name: 'Size', value: 'M', type: 'string', icon: '' },
      { name: 'Count', value: 4, type: 'number', icon: '' },
      { name: 'Absorption', value: 4, type: 'rating', icon: '💧' },
      { name: 'Rating', value: 2, type: 'rating', icon: '⭐️' },
      { name: 'Confort', value: 2, type: 'rating', icon: '🛏' },
      { name: 'Sleeves', value: 'Short', type: 'string', icon: '' },
      { name: 'Color', value: 'White', type: 'string', icon: '' },
    ],
  },
]

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

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

原文由 Bambi Bunny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

上述机制称为 Fallthrough Attributes （“Non-prop attributes”Vue 2 文档）。很高兴知道这种自动继承可以 关闭，这允许您自己将这些属性应用到您选择的除根元素之外的元素（或组件）上。这可能非常有用。最值得注意的是在围绕标准 HTML 元素（如输入或按钮）或某些库组件设计专门的包装器时……

原文由 Michal Levý 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

ItemProperties 组件有多个根节点，因为它在根中使用 v-for 呈现列表。

基于类名（ infobox-item-properties ），我认为你希望将类应用于容器元素，所以一个简单的解决方案是只添加该元素（例如 div ) 在你的根组件中：

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

演示

原文由 tony19 发布，翻译遵循 CC BY-SA 4.0 许可协议