在 Vue3 中，自定义事件是一种强大的机制，用于父子组件之间的通信。通过自定义事件，父组件可以监听子组件触发的特定事件，并作出相应的响应。这一节将详细介绍如何创建和使用自定义事件。
创建自定义事件
在 Vue3 中，可以通过 $emit 方法来触发一个自定义事件。首先，我们需要在子组件中定义一个事件处理器，在适当的时机调用 $emit 方法。
示例：创建一个简单的计数器组件
假设我们有一个计数器组件，它包含一个按钮，每次点击按钮时，计数器的值会增加。我们希望在计数器增加时，能够通知父组件。
---- ----------- ---
----------
-----
------- ---------------------- -----------
--------- -- ----- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
--
--
-------- -
----------- -
-------------
-- ------ ------------------- ------
------------------------------- ------------
--
--
--
---------在这个例子中，当按钮被点击时，increment 方法会被调用，更新 count 的值，并触发一个名为 counter-increment 的自定义事件，同时传递当前的计数值作为参数。
在父组件中监听自定义事件
父组件需要使用 v-on 指令（或其简写 @）来监听子组件触发的自定义事件。
示例：父组件接收并处理自定义事件
---- ------- ---
----------
-----
--------------
-------- ------------------------------------ --
-------------- -- ------------- ------
------
-----------
--------
------ ------- ---- ----------------
------ ------- -
----------- -
--------
--
------ -
------ -
-------------- --
--
--
-------- -
---------------------- -
-- ---------
------------------ - ------
--
--
--
---------在这个例子中，父组件通过 @counter-increment="handleIncrement" 监听子组件 Counter 触发的 counter-increment 事件。每当该事件被触发时，handleIncrement 方法就会被调用，更新 receivedCount 的值。
使用 .once 修饰符
有时我们可能只需要在某个事件触发一次后就不再关心它。Vue 提供了 .once 修饰符来实现这一点。
示例：使用 .once 修饰符
---- ------- ---
----------
-----
--------------
-------- --------------------------------------------- --
-------------- -- ----------------- ------
------
-----------
--------
------ ------- ---- ----------------
------ ------- -
----------- -
--------
--
------ -
------ -
------------------ -----
--
--
-------- -
-------------------------- -
-- -----
---------------------- - ------
--
--
--
---------在这个例子中，handleIncrementOnce 方法只会被调用一次，因为我们在绑定事件时使用了 .once 修饰符。
事件修饰符
Vue 提供了一些内置的事件修饰符，可以帮助我们更方便地处理事件。例如，.stop 修饰符可以阻止事件冒泡，.prevent 修饰符可以阻止默认行为等。
示例：使用事件修饰符
---- ----------- ---
----------
-----
------- --------------------------- -----------
--------- -- ----- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
--
--
-------- -
---------------- -
------------------------ -- --------
-------------
------------------------------- ------------
--
--
--
---------在这个例子中，我们使用了 .stop 修饰符来阻止事件冒泡。也可以手动调用 event.stopPropagation() 来达到相同的效果。
总结
通过以上介绍，我们可以看到，Vue3 中的自定义事件是一个非常灵活和强大的工具，允许父子组件之间进行高效的通信。无论是创建、监听还是修饰事件，Vue 都提供了简单易用的方法来实现这些功能。希望这些示例能够帮助你在实际项目中更好地运用自定义事件。