Vue组件间如何通过$emit和event Bus实现跨组件事件触发？

本文共计1187个文字，预计阅读时间需要5分钟。

组件间事件触发及前使用组件，非频繁问题，平级问题，目前工作中，公司大佬带着我手写过一个组件，非常感谢他的指导。目前简单的组件已具备自身逻辑思维，正在...

组件之间事件触发

之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。

新增按钮组件：

操作按钮组合组件：

此时有个需求就是，无论是哪个按钮，如果改变了列表中的数据，列表需要实时更新数据。

此时就需要用到组件间的事件触发。

父子组件之间事件触发可以使用$emit

$emit的使用方法如下：

在子组件中，写一个click点击事件。比如：

cancelCU() { this.dialogVisible = false; this.$emit('closeAdd') }

然后在父组件中子组件上，添加一个 @closeAdd="closeAddClick"，closeAddClick函数就是执行了。

新增按钮可以使用这种方式。