在 Vue 应用中，组件之间的传值是非常常见的操作。Vue 提供了多种传值方式，包括 Props、事件监听、Provide/Inject 等。其中祖孙组件之间的传值也是一个必须要掌握的技能。
本文将重点介绍 Vue 中祖孙组件之间的传值方法，分别为 $attr、$listeners、Provide/Inject。通过本文的学习，读者将能够更加深入地了解这些传值方法的运作原理，同时也能更好地掌握如何在项目中使用这些方法。
$attr
$attr 是 Vue 在 2.4.0 版本中引入的新特性，用于帮助开发者在非 .sync 的父子组件之间传递 Props。当一个子组件使用了 inheritAttrs: false 选项时，父作用域中的所有属性都会被自动添加到子组件的根元素上。
在祖孙组件之间的传值中，可以通过这一特性将 Props 值直接传递给子组件的子组件。
具体用法如下：
-- -------------------- ---- -------
----------
------ ------------ --
-----------
--------
------ ----- ---- --------------
------ ------- -
----------- - ----- --
------ -
------ -
----- -
----- --------
---- --
-
-
-
-
---------在上面的代码中，父组件向子组件 child 传递了一个名为 data 的 Props，它的值是一个包含 name 和 age 属性的对象。接下来，我们在子组件 child 中再向它的子组件 grandchild 传递这个 Props。
-- -------------------- ---- ------- ---------- ----------- --------------- -- ----------- -------- ------ ---------- ---- ------------------- ------ ------- - ----------- - ---------- -- - ---------
在上面的代码中，我们使用了 $attrs，将父组件中的 Props 直接传递给了子组件 grandchild。
以上便是通过 $attrs 进行祖孙组件传值的方式。但是，这种方式有一个缺点，就是父组件的所有 Props 都会被传递给子组件。这样做的话，可能会导致 Props 的滥用，造成组件之间的耦合度过高。
$listeners
除了 $attrs，Vue 还提供了 $listeners，它能够将父组件中的事件本地注册在子组件中。
具体用法如下：
-- -------------------- ---- ------- ---------- ----------- ----------------- -- ----------- -------- ------ ---------- ---- ------------------- ------ ------- - ----------- - ---------- -- - ---------
在上面的代码中，我们使用了 $listeners，将父组件中的所有事件本地注册在了子组件中。这样，子组件就可以接收父组件的事件，并进行相应的处理。
以上便是通过 $listeners 进行祖孙组件传值的方式。相比 $attrs，使用 $listeners 可以避免 Props 的滥用，从而减少组件之间的耦合度。
Provide/Inject
Vue 中的 Provide/Inject 是另一种用于组件传值的机制。它通过提供/注入的方式，将数据传递给后代组件。
具体用法如下：
-- -------------------- ---- -------
-- ----------
----------
------ --
-----------
--------
------ ----- ---- --------------
------ ------- -
----------- - ----- --
--------- -
------ -
----- ---------
-
--
------ -
------ -
----- -
----- --------
---- --
-
-
-
-
---------
-- ---------
----------
----------- --
-----------
--------
------ ---------- ---- -------------------
------ ------- -
----------- - ---------- --
-
---------
-- --------------
----------
------- --------- --------
-----------
--------
------ ------- -
------- --------
-
---------在上面的代码中，父组件 parent 中通过 provide 方法提供了一个名为 data 的数据，它的值是一个包含 name 和 age 属性的对象。
然后，子组件 child 和孙子组件 grandchild 分别通过 inject 方法注入了这个数据，这样就完成了一个简单的 Provide/Inject 的传值示例。
需要注意的是，Provide/Inject 并不是响应式的，因此无法自动感知父组件数据的变化。如果需要实现响应式传值效果，可以考虑使用 watch 或类似的方式实现。
总结
祖孙组件之间的传值在 Vue 中是非常常见的操作，对于在项目中使用 Vue 进行开发的开发者而言，了解传值方法的使用方式可以帮助我们更加高效地进行开发工作。本文分别介绍了 $attr、$listeners 和 Provide/Inject 三种传值方法，在实际项目中，读者可以根据具体需求选择最适合的传值方法，快速有效地完成组件之间的传值操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645da714968c7c53b000edbd