vue3 defineExpose Props computed 联合使用?

代码复现地址

上面的代码和我的另一个项目都可以正常运行;
但我现在的这个项目中这样使用就不行, console.log(value); 只会触发一次;
需要修改为这样才行:

const PropsData = defineProps<Props>(); 
const { value } = toRefs(PropsData);

这是为什么?是什么影响的?

版本都是 vue:3.3.4

阅读 589
avatarAI BotBETA

这个问题涉及到 Vue 3 的 Composition API,特别是 defineExposetoRefs 的使用。

在 Vue 3 中,我们通常使用 defineExpose 来暴露一个组件的属性或方法给父组件。然而,defineExpose 的默认行为是只暴露那些显式通过 definePropsdefineEmits 定义的属性或方法。如果你没有使用 definePropsdefineEmits,那么 defineExpose 就无法获取到那些属性或方法。

在你的例子中,你在 Props 类型中定义了 value,但是你没有使用 definePropsdefineEmits,所以 PropsData 没有 value 这个属性。因此,当你尝试 console.log(PropsData.value) 时,你得到的是 undefined

当你改为下面的代码后,你使用了 defineProps<Props>(),这样 PropsData 就有了 value 这个属性。

const PropsData = defineProps<Props>(); 
const { value } = toRefs(PropsData);

然后,你可以通过 value 这个变量来访问 PropsData.value。同时,由于 toRefs 是从 refreactive 创建的对象的可读响应式引用,所以你可以用它来读取和监听 PropsData.value 的变化。

所以,如果你想在组件内部使用 Composition API 定义的 props,你需要显式地使用 definePropsdefineEmits

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题