在 Vue.js 中，父子组件通常是一起工作的，需要进行交互和通信。因为 Vue.js 基于组件化开发，组件之间的通信是至关重要的。Vue.js 提供了多种方式实现父子组件通信，本文将着重介绍其中的两种方式：props 和 $emit。
props
props 是一种在 Vue.js 中用于父子组件通信的机制。它允许父组件将数据传递给子组件，并且子组件可以在 props 中接收这些数据。
定义 props
在父组件中定义 props，需要在组件定义中加入 props 属性，如下所示：
-------------------------------- - ------ ------------ --------- -------- ------- --------- --
在 props 中将需要传递给子组件的属性列出，这里是 message。
传递 props
在父组件中，需要将需要传递给子组件的数据绑定在组件上，如下所示：
---------------- -----------------------------------
这里使用了 :message 语法将 hello 绑定在了 message 属性上。
子组件使用 props
在子组件中，可以通过 props 对象接收父组件传递的数据，如下所示：
-------------------------------- - ------ ------------ --------- -------- ------- --------- --
当子组件渲染时，message 将被替换成其父组件传递的数据。
$emit
除了 props，Vue.js 还提供了一个 $emit 方法，使得子组件可以像向父组件传递信息一样向父组件发送信息。
发送事件
在子组件中，通过 $emit 方法发送事件。例如：
------------------------ --------
这里 event-name 是事件名称，payload 是要传递给父组件的数据。
处理事件
在父组件中，通过给子组件添加 v-on 指令来处理子组件发出的事件。例如：
---------------- ------------------------------------------------
这里 event-name 是子组件发出的事件名称，handleEvent 是处理该事件的回调函数。
示例代码
下面是一个父组件和子组件之间通过 props 和 $emit 进行通信的示例代码：
-- ---
----------
-----
---------------- ------------------ -------------------------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
----- ------------------
----------- -
--------------
--
------ -
------ -
-------- --------
-
--
-------- -
---------------- -
-----------------
-
-
-
---------
-- ---
----------
-----
----- ------- ------
------- ------------------------- ----------------
------
-----------
--------
------ ------- -
----- -----------------
------ ------------
-------- -
------------- -
------------------ -------- ---- ----- -----------
-
-
-
---------在这个示例中，父组件向子组件通过 props 传递了一个名为 message 的属性，子组件可以使用这个属性来渲染内容。在子组件中，当点击按钮时，通过 $emit 发送了一个名为 'send' 的事件，父组件使用 v-on 指令监听了该事件，并调用了 handleSend 方法来处理传递的数据。当 $emit 发送了事件时，$emit 触发的处理函数会在父组件中被调用，这个例子中，handleSend 函数将发送的数据输出到了控制台。
结论
在 Vue.js 中，props 和 $emit 是两种常用的父子组件之间通信的方式。props 允许父组件向子组件传递数据，而 $emit 则允许子组件向父组件发送信息。使用这两种方式，可以让你更好地管理应用程序中的各种组件，并使它们之间的交互更加便捷。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6718080cad1e889fe226350b