Javascript VueJS-$emit和$listeners之间的差异

让我们以下面的场景为例，其中

WelcomePage

（父级）将

LoginForm

（子级）与自定义事件

@submit

：

//WelcomePage.vue
登录

然后，组件

LoginForm

具有以下代码：

//LoginForm
... 

handleSubmit（）{
//做些事情。。。
//遵循Vue文档创建自定义事件。
此.$emit（'submit'，'some_data'）
//或者…我们也可以使用$listeners。
此.$listeners.submit（'some_data'））
//做其他研究。。。
}

使用

this.$listeners.submit（）

而不是

this.$emit（'submit'）

有什么缺点吗

使用

this.$listeners

的一个优点是它可以与

wait

一起使用，这迫使我们使用

done（）

回调方法。当我们想在自定义事件完成后更新某些状态（this.isLoading）时，它非常有用

将$emit与回调一起使用：

//LoginForm.vue
异步handleSubmit（）{
this.isLoading=true
此.$emit（'submit'，'some_data'，（）=>{
this.isLoading=false
})
}
//WelcomePage.vue
异步handleLogin（数据，完成）{
//等待与“数据”相关的资料。。。
完成（）；
}

使用$listeners和wait:

//LoginForm.vue
异步handleSubmit（）{
this.isLoading=true
等待此消息。$listeners.submit（'some_data'）//无需使用done回调
this.isLoading=false
}

所以，我的问题是：可以使用

这个。$listeners

？

这个$emit的目的/优点是什么


更新：

第一个（明显的）选项是将prop
isLoading
从父对象传递给子对象，而不是使用
$emit

但这需要在每次使用children组件时（它被大量使用）在
handleSubmit
上设置并更新
this.isLoading=true | false
。因此，我正在寻找一种解决方案，在调用
@submit
时，家长无需担心
的孤岛问题。
使用道具而不是$emit的回调


const LoginForm={
名称：'登录表单'，
道具：{
装载：{
类型：布尔型，
默认值：false，
}
},
模板：`
让你登录
登录
`,
};
新Vue({
el:“#应用程序”，
组成部分：{
LoginForm，
},
数据（）{
返回{
loadingLoginForm:false，
};
},
方法：{
handleSubmit（）{
//在异步之前设置加载状态
this.loadingLoginForm=true；
//一些异步消息
setTimeout（（）=>this.loadingLoginForm=false，1500）
}
}
})
我认为，
$emit
有助于保持通量架构。
您可以很容易地看到数据流，它可以帮助您进行调试

另一方面，使用
$listeners
被认为是一种不好的做法。这是可以做到的，但它可以打破单向数据流。同样，对于
$root
，您仍然可以访问它，但这并不意味着您应该使用（修改）它；-）

不过，使用什么始终取决于上下文和您的需要。请注意，一旦单向数据流中断，就很难调试


评论后编辑：这只是我的观点

使用
props
和
$emit
作为组件间通信的推荐方式时。您有一个清晰的数据流。另外，Vue开发工具可以帮助您跟踪每个
$emit
，这样您就可以一步一步准确地知道发生了什么

当使用“collbackFunc”作为
道具时
，并在仍能工作的子组件中调用此回调。这仍然是一条很好的道路。它的缺点是它不是一个推荐的用法

想象一下，您将“callbackFunc”传递给许多child组件。当某些东西出了问题时，很难追踪它是从哪里发射的

这同样适用于在
$listeners
上直接调用方法。突然你的状态改变了，你不知道从哪里来。哪个组件以及何时启动了它。
只是出于好奇。。为什么需要异步发射？@Sølvetratreøe一个具体的例子：
LoginForm
在处理提交（异步）时需要显示“加载状态”。完成后，
LoginForm
需要清理加载状态。我认为在这种情况下通常的“goto”将是额外的emit
加载。然后在异步函数之前发出loading=true，在异步函数之后发出loading=false。我误解了你的答案。实际上，您想要做的是为
LoginForm
提供一个加载道具。一旦父级获得emit
some_data
，它会将加载设置为true，完成后会将加载设置为false。让我们来看看。感谢您的回答！你能给我举个例子说明，
$listeners
可以在哪里中断流吗？与
$emit
相比，调试更难吗？@sandrina-p我已经更新了我的答案。但这只是我的观点；-）@sandrina-p如果您还想在聊天室中看到我昨天提到的操作的自动加载程序，请告诉我。在该项目中，我们决定保留
$listeners
方法。这是对我们的案例最有效的方法，我们记录了它的优点/缺点，以帮助避免将来发生任何意外的突破性变化。谢谢你的帮助：）