Vue DevTools中props始终显示为$attrs的问题该如何解决？

该问题核心触发原因是子组件未显式声明对应接收的自定义prop，Vue会把所有没有在子组件props选项中注册的传值属性统一归类到$attrs对象中。inheritAttrs: false配置仅控制$attrs内的属性是否自动挂载到子组件根DOM节点上，不会影响props的识别逻辑，所以之前的操作无法解决问题。

排查解决步骤 #

• 第一步：检查子组件props声明，必须显式注册showLoadMoreButton属性，示例代码如下：

// 子组件配置
export default {
  // 显式声明要接收的prop，这一步是核心
  props: {
    showLoadMoreButton: {
      type: Boolean,
      default: false
    }
  },
  inheritAttrs: false,
  data() {
    return {}
  }
  // 其他组件逻辑
}

• 第二步：核对prop命名是否匹配，若父组件模板使用kebab-case格式传值（如:show-load-more-button="load"），子组件props需对应声明为驼峰格式showLoadMoreButton，命名不一致也会导致属性被归入$attrs。
• 第三步：若使用Vue3 <script setup>语法，需通过defineProps声明属性，示例：

<script setup>
const props = defineProps({
  showLoadMoreButton: Boolean
})
</script>

完成上述配置后，showLoadMoreButton就会被Vue DevTools识别为props而非$attrs。

内容的提问来源于stack exchange，提问作者Swati