Vue中使用v-bind对象传props，子组件未声明如何获取？

嘿，这个场景我太熟悉了！当你用v-bind="item"把对象所有属性传给子组件，但又不想逐个声明props时，Vue提供了现成的方式来获取这些属性，分Vue2和Vue3两种情况给你说明：

Vue2 解决方案 #

在Vue2中，所有未声明为props的传递属性，都会自动挂载到组件实例的$attrs对象上。另外默认情况下，这些属性还会自动绑定到子组件的根DOM元素上，如果不需要这个行为，可以设置inheritAttrs: false来关闭。

示例代码：

<template>
  <!-- 如果设置了inheritAttrs: false，根元素不会自动绑定$attrs里的属性 -->
  <div>子组件内容</div>
</template>

<script>
export default {
  name: 'cusDom',
  props: [],
  inheritAttrs: false, // 可选，按需开启/关闭
  mounted() {
    // 这里就能拿到所有通过v-bind传递的属性
    console.log(this.$attrs);
    // 比如访问item里的id：this.$attrs.id
  }
}
</script>

Vue3 解决方案 #

Vue3里根据你使用的API风格（组合式/选项式），有两种方式：

组合式API（