当前位置: 首页 > 知识库问答 >
问题:

vue3 defineExpose Props computed 联合使用?

惠凯歌
2023-12-01

代码复现地址

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

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

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

版本都是 vue:3.3.4

共有1个答案

匡凌
2023-12-01

这个问题涉及到 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

 类似资料:
  • 我有两个表,一个是,另一个是有关系,我如何用spring-data-JPA将它们合并到一个列表中。 **不想使用本机查询 更新: 我想要的确切查询: 从组中选择标题

  • 我已经建立了一个rabbit集群,每当数据库中发生变化时,我都会将消息发布到fanout交换中。 我为使用这些更新的一些微服务绑定了专用队列,我最初还为外部客户端设置了专用队列,以便他们可以将其与自己的rabbit基础架构联合起来,并使用每条消息的副本。 现在,我想知道,允许exchange联合而不是为每个新的外部消费者创建新的专用队列是否是更好的方法,因为将有越来越多的用户加入。 有哪些利弊?

  • 问题内容: 问题 表格1: 表2: 表3: 给定键(A1或A2),我需要使用表2中的相应值更新表1中的DataColumn1和DataColumn2列。 因此,table1可以更新x个行,如上面的数据所示。如果我要更新A1,则01和02行都应更新 (因此,表01中的值对于键01和键02的datacolumn1分别为0.15和1.2(对于datacolumn2)) 到目前为止我尝试过的是: 问题:

  • 假设我有这些类,请注意实体无论如何都不相关。 假定我有一个类,它的属性为,我可以在其中存储一个笔记本ID列表或任何字符串ID。假设有idsPointingToanEntity=[1,2,3],那么这个[1,2,3]在数据库中有一个等效的膝上型计算机条目。 注意:也可以是另一个实体,使不是一个选项

  • 我在Stackoverflow上看到了很多解释关系区别的帖子:关联、聚合、组合和继承,并附有例子。然而,更具体地说,我对每种方法的优点和缺点,以及什么时候一种方法对手头的任务最有效感到困惑。这是我一直无法找到一个好答案的事情。 为了与论坛的指导方针保持一致,我没有问为什么人们个人更喜欢使用继承而不是组合。我特别感兴趣的是每种方法中的任何客观优点/缺点,尽管听起来很强。一、 e.一种方法是创建比另一

  • 问题内容: 我想写一个查询 或诸如此类 你能帮我么? 问题答案: 这应该工作: 从 MSDN : 在使用UNION,EXCEPT或INTERSECT运算符的查询中,仅在语句末尾才允许使用ORDER BY。仅当您在顶级查询中 而不是子查询中 指定UNION,EXCEPT和INTERSECT时,此限制才适用。 编辑 :强制您需要将顺序应用于外部查询的顺序。我已经向两个查询添加了一个常量值列。