Vue.js 是一个流行的前端框架，在开发中经常会用到父子组件通信的功能。本文将详细讲解 Vue.js 中父子组件之间通信的几种方法，包括 props、事件和 provide/inject。
1. props
props 是 Vue.js 中父组件向子组件传递数据的主要方式。父组件将数据通过 props 绑定到子组件上，子组件可以在内部直接使用这些数据。
下面是一个简单的示例代码：
-- -------------------- ---- -------
----------
-----
------ -----------------------
------
-----------
--------
------ ----- ---- --------------
------ ------- -
----- ---------
----------- -
-----
--
------ -
------ -
---- ------- --------
-
-
-
---------在上面的代码中，父组件通过将 msg 数据绑定到子组件的 message 属性上，实现了父子组件之间的通信。子组件可以通过 this.message 来获取 msg 数据。
2. 事件
事件也是 Vue.js 中父子组件之间通信的一种方式。子组件可以通过 $emit 方法向父组件触发事件，并携带自定义的数据。父组件可以通过在子组件上绑定事件来接收这些数据。
下面是一个简单的示例代码：
-- -------------------- ---- ------- ---- --- --- ---------- ------- ----------------------- ----------------- ---------------- ----------- -------- ------ ------- - ----- ------- - ---------
-- -------------------- ---- -------
---- --- ---
----------
-----
----- ------- ------
------ -------------------------------
------
-----------
--------
------ ----- ---- --------------
------ ------- -
----- ---------
----------- -
-----
--
------ -
------ -
-------- ------- --------
-
--
-------- -
---------------------- -
------------ - ---------
-
-
-
---------在上面的代码中，子组件通过 $emit 方法触发了一个名为 change 的事件，并携带了字符串 'Hello!'。父组件通过在子组件上绑定 @change 事件来接收这个数据，并将其赋值给 message。
3. provide/inject
provide/inject 是 Vue.js 中另一种父子组件通信的方式。它可以实现祖先组件向所有后代组件传递数据，而无需通过 props 层层传递。
上面的示例代码可以使用 provide/inject 实现父子组件之间的通信，改写后的代码如下：
-- -------------------- ---- -------
---- --- ---
----------
-----
----- --- ------
---------------
------
-----------
--------
------ ----- ---- --------------
------ ------- -
----- ---------
----------- -
-----
--
--------- -
------ -
-------- --------
--
--
------ -
------ -
---- ------- --------
-
-
-
----------- -------------------- ---- -------
---- --- ---
----------
-----
---------------------------
------
-----------
--------
------ ---------- ---- -------------------
------ ------- -
----- --------
----------- -
----------
-
-
----------- -------------------- ---- ------- ---- ---- --- ---------- ----- ------- ------ ----------- -------- ------ ------- - ----- ------------- ------- ----------- - ---------
在上面的代码中，父组件通过 provide 函数向所有后代组件提供 message 数据。子组件不需要显式的引用 message，它们只需要在 inject 选项中声明 message，就可以随时访问到它。
结论
Vue.js 中父子组件通信的方式有很多种，包括 props、事件和 provide/inject。开发人员应该根据实际情况选择最适合自己的方式来实现组件之间的通信。在实践中，我们经常使用多种方式相结合来实现复杂的组件间通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675105f6050cf9039c194c11