uniapp开发时，发出警告Extraneous non-props attributes (id) were passed to component but could not be

Question

使用uniapp开发时，跳转参数

<view class="card-bottom">
                                <view class="price">{{ food.presentPrice }}元</view>
                                <view class="btn">
                                    <view class="btn-item" @click="toPath(`/pages/StoreManagement/EditOrNewMenu?food=${food.id}`)">编辑</view>
                                    <view class="btn-item" @click="updateFoodPublish(food.id)">下架</view>
                                </view>
                            </view>

发出警告Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 该如何解决

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】： 您提问的目的是解决在使用uni-app进行开发时，遇到的一个Vue警告问题。警告内容指出，组件接收到了一个非props属性(id)，但是无法自动继承，因为组件渲染的是片段或文本根节点。

【图片内容】： 您上传的图片显示了一段Vue组件的警告信息，这个警告是由EditorNewMenu.vue文件中的第223行触发的。警告信息指出，当您尝试将id作为一个额外的属性传递给组件时，由于组件渲染的是片段或文本根节点，这个属性不能被自动继承。

【问题出现原因】： 这个问题出现的原因是在Vue中，如果您尝试将一个非props属性传递给组件，而该组件的根节点不是一个标准的元素节点（比如是一个HTML片段或者文本节点），那么这些额外的属性将不会被组件所接受。在您提供的代码中，您可能在组件内部没有定义一个对应的props来接收id属性，或者组件的渲染函数没有正确地处理这个属性。

【问题解决方案】： 要解决这个问题，您可以采取以下步骤：

1. 定义Props：确保您的组件有一个id属性的定义，这样它就可以接收并使用这个属性。

2. 使用v-bind：在传递属性时，使用v-bind或者简写为:来绑定id。

3. 检查组件渲染：确保您的组件不是在渲染一个片段或者文本作为其根节点，因为这样会导致非props属性无法被继承。

4. 使用key：如果id用于列表渲染中的项目的唯一标识，您可以使用v-bind:key来绑定，这是Vue官方推荐的做法。

【提供代码】： 以下是修改后的代码示例，展示了如何在组件内部定义props并使用v-bind来传递id：

<!-- 假设您的组件名为 EditOrNewMenu -->
<EditOrNewMenu v-bind:key="food.id" :food-id="food.id" />

并在EditOrNewMenu组件内部定义props：

export default {
  props: {
    foodId: {
      type: [String, Number],
      required: true
    }
  }
}

【代码运行方式】： 您需要在支持Vue.js和uni-app的环境中运行这段代码，比如在您的项目开发环境中。

【代码预期运行结果】： 如果您正确地按照上述步骤修改代码，那么您应该不会再看到关于(id)的警告信息，同时您的组件应该能够正确地接收并使用id属性。

【推荐相关链接】：

• Vue.js官方文档 - Props
• uni-app官方文档
• Vue.js处理列表渲染中的key