每当在子组件中更新时更新父元素中的数据

Posted 2023-02-23

【中文标题】每当在子组件中更新时更新父元素中的数据

【英文标题】：Update data in parent element whenever it updates in child component

【发布时间】：2019-02-06 10:30:36

【问题描述】：

好吧，假设我在 vue 中有 2 个组件，Parent.vue 和 Child.vue。 在 Child.vue 我有这个

data () 
  return 
    childData
  
,

在 Parent.vue 中，我使用它从孩子那里获取数据

data()
return
  dataFromChild : child.data().childData,
 
,

这里一切都很好，但我有一个问题，childData 将根据用户的操作进行更新，我该如何让 dataFromChild 在 childData 更新时更新？我不希望使用事件总线或 vuex，因为这对我的情况来说太过分了。

【问题讨论】：

通过事件发送数据：vuejs.org/v2/guide/…

【参考方案1】：

javascript（因此 Vue.js）是事件驱动的。您确定使用事件对您的情况来说是多余的吗？

本质上，您希望在子数据更改时更新父数据。这种变化是一个事件。 “某事”正在发生，因此您的父母可以对此做出反应。

我假设您在子组件上设置 ref。我想提请您注意本指南的这一部分：

$refs 仅在组件被渲染后才被填充，它们不是响应式的。

我推荐你使用 Vue.js 事件系统： https://vuejs.org/v2/guide/components-custom-events.html