Vue.js 是一款流行的前端框架，通过组件化的开发方式，使得代码更加清晰、易于维护。在 Vue.js 中，组件间的通信是非常重要的一部分。本文将详细介绍 Vue.js 中对于子组件的通信方式，包括 props、$emit、$parent/$children、provide/inject 等。
1. props
props 是 Vue.js 中组件间通信的一种方式，它允许一个父组件向子组件传递数据。子组件通过 props 接收数据，从而实现父子组件间的数据传递。props 是单向数据流，即只能从父组件向子组件传递数据，子组件不能修改 props 中的数据。
下面是一个简单的例子，演示了如何通过 props 传递数据：
-- -------------------- ---- ------- ---- --- --- ---------- ----- --------------- --------------- ------- -- ------ ----------- -------- ------ -------------- ---- ----------------------- ------ ------- - ----------- - -------------- - -- ---------展开代码
-- -------------------- ---- ------- ---- --- --- ---------- ------- ------- -------- ----------- -------- ------ ------- - ------ - -------- ------ - -- ---------展开代码
在上面的例子中，父组件通过 message 属性向子组件传递了一条消息。子组件通过 props 接收到了这条消息，并在模板中进行展示。
2. $emit
$emit 是 Vue.js 中组件间通信的另一种方式，它允许子组件向父组件传递数据。子组件通过 $emit 触发一个自定义事件，并传递数据。父组件通过 v-on 监听这个自定义事件，并在事件回调函数中接收到子组件传递的数据。
下面是一个简单的例子，演示了如何通过 $emit 传递数据：
-- -------------------- ---- ------- ---- --- --- ---------- ----- --------------- ------------------------------------- -- ------ ----------- -------- ------ -------------- ---- ----------------------- ------ ------- - ----------- - -------------- -- -------- - -------------------------- - --------------------- - - -- ---------展开代码
-- -------------------- ---- ------- ---- --- --- ---------- ------- ----------------------------- ---------------- ----------- -------- ------ ------- - -------- - ------------- - -------------------------- ------- --------- - - -- ---------展开代码
在上面的例子中，子组件通过 $emit 触发了一个 send-message 自定义事件，并传递了一条消息。父组件通过 v-on 监听了这个自定义事件，并在事件回调函数中接收到了子组件传递的消息。
3. $parent/$children
$parent/$children 是 Vue.js 中组件间通信的另一种方式，它允许一个子组件访问它的父组件或者它的子组件。$parent/$children 并不是官方推荐的通信方式，因为它会使得组件间的耦合度变高，不利于代码的维护。
下面是一个简单的例子，演示了如何通过 $parent/$children 访问组件：
-- -------------------- ---- ------- ---- --- --- ---------- ----- --------------- -- ------ ----------- -------- ------ -------------- ---- ----------------------- ------ ------- - ----------- - -------------- - -- ---------展开代码
-- -------------------- ---- ------- ---- --- --- ---------- ------- ------------- -------- ----------- -------- ------ ------- - --------- - --------------- - ------ --------------------- - - -- ---------展开代码
在上面的例子中，子组件通过 $parent 访问了它的父组件，并获取了父组件中的 message 数据。
4. provide/inject
provide/inject 是 Vue.js 中组件间通信的另一种方式，它允许一个父组件向它的所有子孙组件提供数据。provide 可以提供一个对象，对象中包含了需要共享的数据。inject 可以注入这些数据，并在组件中使用。
下面是一个简单的例子，演示了如何使用 provide/inject 共享数据：
-- -------------------- ---- ------- ---- --- --- ---------- ----- --------------- -- ------ ----------- -------- ------ -------------- ---- ----------------------- ------ ------- - ----------- - -------------- -- --------- - ------ - -------- ------- ------- -- - -- ---------展开代码
-- -------------------- ---- ------- ---- --- --- ---------- ------- ------- -------- ----------- -------- ------ ------- - ------- ----------- -- ---------展开代码
在上面的例子中，父组件通过 provide 提供了一个包含 message 数据的对象。子组件通过 inject 注入了这个对象，并在模板中使用了 message 数据。
结语
本文介绍了 Vue.js 中对于子组件的通信方式，包括 props、$emit、$parent/$children、provide/inject 等。每种通信方式都有其适用的场景，开发者需要根据实际情况选择合适的通信方式。同时，也需要注意组件间的耦合度，避免出现不必要的依赖关系，从而提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d54253a941bf71349b9093
