非父子组件之间监听和触发事件

只会开发

于 2021-08-28 10:33:38 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏：父子组件文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42274795/article/details/119964682

父子组件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在 Vue3 中如何使用自定义事件库 mitter 进行非父子组件间的通信。通过 $on() 监听事件，如 'ToolControlHide'，并在事件触发时关闭工具箱。而 $emit() 用于在适当的时候触发事件，例如在工具栏切换时，根据条件隐藏工具栏或结束量算操作。这种事件驱动的通信方式增强了组件之间的解耦。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3中使用mitter.on和mitter.emit

由于需要在调用一个不相关的非父子组件中的方法，无法使用父子组件之间调用方法的方式，因此对事件进行监听和调用。
$on():监听事件；
$emit() 触发事件；
1、mitter.on 代码

对事件进行监听操作。

	mitter.on('ToolControlHide', () => {
			showBox.value = false
		})

2、mitter.emit代码

在方法或者事件中直接调用，触发事件。

		const ToolClick = val => {
			showTool.value = !showTool.value
			if (showTool.value) {
				mitter.emit('ToolControlHide') //隐藏工具栏
			} else {
				mitter.emit('EndMeasurement') //停止量算
			}
			//工具栏隐藏后各工具的高亮显示取消
			active.value = ''
		}