组合式API下如何避免props穿透？

在Vue3的组合式API中，避免props穿透通常是通过设置默认值、只读属性（readonly props）以及计算属性（Computed Properties）来实现的。

1. **设置默认值**：当传入的prop未定义时，可以在子组件内部给它一个默认值。例如：

   import { defineProps } from 'vue';

   export default {
     props: {
       myProp: {
         type: String,
         default: '默认值'
       }
     },
     setup(props) {
       return {
         value: props.myProp || '如果没有提供，则使用默认值'
       };
     }
   }

2. **只读props**：使用`{ readonly: true }`标记，这样父组件就不能从子组件接收到修改：

   export default {
     props: {
       myReadonlyProp: {
         type: String,
         default: '',
         readonly: true
       }
     }
   }

3. **计算属性**：对于不需要直接传递，而是需要基于某些条件计算得到的值，可以用计算属性处理：

   computed: {
     derivedValue() {
       return this.myProp.toUpperCase();
     }
   }

总之，组合式API强调了组件间的职责清晰，通过合理的数据流动控制，我们可以有效地防止props穿透。