以下是一个示例：
<template>
<div>
<p>Message from parent: {{ messageFromParent }}</p>
<p>Computed Prop: {{ computedProp }}</p>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
props: {
messageFromParent: {
type: String,
default() {
// 在默认函数中访问组件实例（this）
console.log('Component Instance:', this);
return 'Default Message';
}
}
},
computed: {
computedProp() {
// 在计算属性中也可以访问组件实例（this）
console.log('Component Instance:', this);
return this.messageFromParent.toUpperCase();
}
}
});
</script>
在上述示例中，messageFromParent 是一个具有默认值的 prop，其默认值是一个函数。在这个函数内部，通过 this 可以访问到组件实例。这样你可以在 default 函数中使用组件的数据和方法。
需要注意的是，如果使用箭头函数，它将捕获外部上下文（通常是组件实例），因此在箭头函数中使用 this 会指向上级上下文，而不是组件实例。因此，最好使用普通函数以确保 this 正确指向组件实例。
转载请注明出处：http://www.zyzy.cn/article/detail/553/Vue 3.0