介绍
Vue.js 是一个流行的 JavaScript 前端框架，它提供了丰富的组件化系统来构建复杂的用户界面。在 Vue.js 中，组件通信是一个非常重要的话题，因为它能够让我们构建更加灵活和可重用的组件。
在 Vue.js 中，传递数据通常是从父组件向子组件传递。但是，在某些情况下，我们需要子组件向父组件传递数据。这就是我们需要了解如何处理子组件向父组件传参的地方。
实现
在 Vue.js 中，父组件向子组件传递数据是很简单的事情，我们只需要通过属性传递数据就可以了。但是，子组件向父组件传递数据却不是那么容易。为了实现子组件向父组件传参，我们需要使用 Vue.js 中自定义事件的特性。
自定义事件是组件间通信的一种方式，它能够让一个组件监听另一个组件发出的事件，并触发相应的处理函数。在 Vue.js 中，可以通过 v-on 指令来监听一个组件上的自定义事件：
-- -------------------- ---- ------- ---- --- --- ---------- ------- --------------------------- ----------- ----------- ---- --- --- ---------- ---------------- ----------------------------------- -----------
在上面的示例中，子组件定义了一个 foo 自定义事件，并在点击按钮时触发该事件。父组件使用 v-on 指令来监听子组件的 foo 事件，并调用 handleFoo 处理函数来处理该事件。
在父组件中，我们需要定义一个名为 handleFoo 的方法来处理来自子组件的 foo 自定义事件：
// 父组件
export default {
methods: {
handleFoo() {
console.log('Child component emitted foo event')
}
}
}当子组件触发 foo 自定义事件时，父组件中的 handleFoo 方法就会被调用，并输出日志消息 "Child component emitted foo event"。
示例
以下是一个完整的示例，它演示了如何在 Vue.js 中实现子组件向父组件传参的功能。在这个示例中，我们定义了一个简单的计数器组件，该组件包含一个用于计数的内部状态和一个用于递增计数的按钮。当按钮被点击时，组件会通过自定义事件 increment 向其父组件传递当前计数值。
-- -------------------- ---- -------
---- --- ----------- ---
----------
-----
------- ---------------------------- ------- -----------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
-
--
-------- -
------------------ -
--------------
----------------------- -------------
-
-
-
---------
---- --- ------- ---
----------
-----
-------- ---------------------------------------
---------- ------ -- ----- ------
------
-----------
--------
------ ------- ---- ---------------
------ ------- -
----------- -
-------
--
------ -
------ -
------ -
-
--
-------- -
------------------------ -
---------- - -------
-
-
-
---------在这个示例中，当子组件的按钮被点击时，incrementCounter 方法将递增计数器的内部状态，然后通过 $emit 方法向其父组件传递当前计数值。在父组件中，我们定义了一个名为 handleIncrement 的方法来处理来自子组件的 increment 自定义事件，该方法将接收传递的计数值并将其保存在父组件的状态中。最后，我们在父组件的模板中输出了当前的计数值。
结论
在 Vue.js 中，通过使用自定义事件，我们可以方便地让子组件向父组件传递数据。与此同时，Vue.js 还提供了丰富的组件通信机制，如 v-model 和 Vuex 等，可以更好地满足我们不同的需求。在开发 Vue.js 应用程序时，合理利用这些组件通信机制可以让我们的代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719ec7e9b4aadf9e00702e4