在 Vue.js 中，组件是构建用户界面的基本单元，而组件之间的通信是必不可少的。有时候，子组件需要向其父组件传递数据，这时可以使用 Vue.js 提供的 emit 方法。
emit 方法的用途和作用
emit 方法是 Vue.js 中一个非常重要的方法，它用于向父组件传递数据。在子组件中，可以通过 emit 方法触发一个自定义事件，并将需要传递的数据作为参数传递给该事件。在父组件中，可以监听该事件，并在事件回调函数中处理传递过来的数据。
在子组件中使用 emit 方法
在子组件中，要使用 emit 方法，首先需要在子组件中定义一个自定义事件。可以通过 Vue.js 的 $emit 方法来触发该事件，并将需要传递的数据作为参数传递给该事件。下面是一个示例：
-- -------------------- ---- -------
----------
-----
------- -----------------------------------
------
-----------
--------
------ ------- -
-------- -
---------- -
-------------------------- - -------- ------- ------- --
-
-
-
---------在上面的代码中，我们定义了一个名为 custom-event 的自定义事件，并在 sendData 方法中调用了 $emit 方法触发该事件，并将一个包含 message 属性的对象作为参数传递给该事件。
在父组件中监听自定义事件
在父组件中，可以通过 v-on 指令来监听子组件触发的自定义事件，并在事件回调函数中处理传递过来的数据。下面是一个示例：
-- -------------------- ---- -------
----------
-----
---------------- ----------------------------------------------------
----- ------- ------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------- --
-
--
-------- -
----------------------- -
------------ - ------------
-
-
-
---------在上面的代码中，我们在父组件中使用 v-on 指令监听子组件触发的 custom-event 自定义事件，并在 handleCustomEvent 回调函数中处理传递过来的数据。在该示例中，我们将传递过来的 message 数据绑定到了 message 属性上，以便在父组件中显示。
总结
通过上面的示例，我们可以看到，使用 emit 方法向父组件传递数据非常简单。在子组件中，只需要定义一个自定义事件，并在需要传递数据的地方调用 $emit 方法触发该事件即可。在父组件中，只需要使用 v-on 指令监听子组件触发的自定义事件，并在事件回调函数中处理传递过来的数据即可。通过这种方式，我们可以在 Vue.js 中实现组件之间的数据传递，从而构建更加灵活和复杂的用户界面。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657fae4ad2f5e1655da895ec