Vue3 使用 $attrs 传递数据

在 Vue3 中，$attrs 对象可以用来访问组件上所有未被该组件自身定义的属性。这样可以让父组件传递额外的数据给子组件。

下面是一个示例代码：

<template>
  <ChildComponent v-bind="$attrs" />
</template>

<script>
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    return {}
  }
})
</script>

在 Vue3 中，子组件可以使用 setup 函数中的第二个参数来访问 $attrs。

第二个参数是一个对象，包含了诸如 $attrs、$listeners、$slots 等对象，可以使用这些对象访问组件的上下文信息。

下面是一个示例代码：

<template>
  <div>
    {{myProp}}
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, { attrs }) {
    const myProp = attrs.myProp

    return {
      myProp
    }
  }
})
</script>