Vue 3组合API，如何在setup()函数中获取上下文父属性？

在Vue 3的组合API中，setup()函数是一个新的组件选项，它在组件实例被创建之前执行，并且负责组织组件的逻辑。setup()函数接收两个参数：props和context。

• props是组件接收的属性。
• context是一个普通的JavaScript对象，它暴露了三个属性：attrs、slots和emit。

如果你想要在setup()函数中获取上下文的父属性，你可以通过context.attrs来访问。context.attrs包含了父组件传递给当前组件的非 prop 特性绑定（attribute bindings）。

下面是一个简单的例子，展示了如何在setup()函数中获取父属性：

<template>
  <div>
    <!-- 使用父组件传递的custom-prop属性 -->
    <p>Custom Prop: {{ customProp }}</p>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';

export default defineComponent({
  props: {
    // 定义一个名为customProp的prop
    customProp: String
  },
  setup(props, context) {
    // 使用toRefs将props转换为响应式引用
    const { customProp } = toRefs(props);

    // 访问父组件传递的其他属性
    console.log(context.attrs);

    // 返回对象中的属性将在模板中可用
    return {
      customProp
    };
  }
});
</script>

在上面的例子中，customProp是通过props参数直接获取的，而context.attrs则包含了除了props之外的所有父组件传递的属性。

请注意，context.attrs不会包含通过v-bind="$attrs"显式绑定的props，因为这些props已经被解析并作为props参数传递给了setup()函数。如果你想要在setup()中访问所有的父属性（包括props），你可以直接访问context.attrs，但是你需要自己从props中排除掉那些你不想在attrs中看到的属性。