如何在不调用事件的情况下将数据从子级发送到父级（vue 2）

Posted 2023-02-22

【中文标题】如何在不调用事件的情况下将数据从子级发送到父级（vue 2）

【英文标题】：how to emit the data from child to parent without calling an event(vue 2)

【发布时间】：2021-07-22 00:32:11

【问题描述】：

我需要将数据从子组件发送到其父组件（通过发射），一旦加载子组件而不调用任何事件，如 click 或 keyUp，... 换句话说，我希望一旦挂载子组件，它会自动将其一些数据发送给父组件，而不必调用事件来发出数据。 有没有办法在 vue.js 中做到这一点？ 我会提前谢谢你的

【参考方案1】：

我建议不要使用$emit，而是使用一些store（状态管理）。

它可以是全局商店或子商店。可以更轻松地观察任何父/子组件的变化。

想象一下，您想在父组件的一个非常深的子组件中进行侦听。你会开始传递事件吗？

流程是：

1- 从深层嵌套的子节点更新存储

2- 在父组件中使用 store getter 来观察/计算更改

结帐vuex https://vuex.vuejs.org/

【参考方案2】：

我建议您阅读props 的工作原理：https://vuejs.org/v2/guide/components-props.html

您可以尝试做的一件事是将对象作为道具传递，并在子对象内部改变该对象，而不是监视父对象中的对象更改。但老实说，这与 Vue 的工作原理相冲突，并且是基于实践的。所以不要这样做。

但真正的问题是什么？发出自定义事件是迄今为止最简单的事情，并且完全符合 Vue。

在父母中：

<my-comp @initiated="handleInitiated"/>

在孩子完成初步工作之后：

this.$emit('initiated', initiationData)

如果您在使用默认事件名称时担心事件传播，这个带有自定义事件名称的解决方案可以解决这个问题。当然，您也可以随时停止进一步传播。