Vue 3 passing array warning: E​​xtraneous 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：应用程序有效，但我担心那个警告。我能做些什么请喜欢正确的方式？

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

Answer 1

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

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

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

demo

Answer 2

嗯，我认为错误信息很清楚。

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

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

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

上述机制称为Fallthrough Attributes ("Non-prop attributes" Vue 2 docs). It is good to know that this automatic inheritance can be switched off，它允许您自己将那些属性应用到您选择的除根元素之外的元素（或组件）上。这可能非常有用。最值得注意的是在围绕标准 HTML 元素（如输入或按钮）或某些库组件设计专门的包装器时...

Answer 3

您还可以通过这样做来防止在子组件中传递属性：

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

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