老铁们，做Vue项目时那些组件之间的关系真是让人头疼。别怕，其实除了你们都知道的Props和$emit外，Vue还有两个好用的东西——$attrs 和$listeners。想学怎么用吗？别急，跟我一起深入了解它们，以后处理这种问题会变得容易很多！

$attrs属性的作用

$attrs这玩意儿真的不错！就像小包裹似的，装着父组件给子组件传递的各种有用信息。但别忘了，这儿可不包括从props传来的。那么实用干嘛使的？比如当你想悄悄塞点啥给子组件，而不需要去修改props；再或者你遇到那种超级复杂的组件，希望所有部件都知道情况时，这时候它可就派上大用场！

你是不是在担心 Vue 的高级组件属性问题？别急，一个神奇的$attrs就能搞定！那些没有告诉你却又需要的属性，这个小东西都会帮你默默传递过去，超好用的。

哎呦你猜怎么着？这个$attrs真是用的太爽快！之前那个老方法，想传个爸爸组件的属性给儿子组件，那可真不是盖的，耗时又费力，修起来还特烦。可是现在有了$attrs，点两下鼠标就能搞定所有属性传承，代码也简洁明了多了，做起事来当然轻松许多哟~

$listeners属性的应用

别忘了 Vue 里还有$attrs 和$listeners，这俩组件功能强大得有时候会吓到我！它们能让你的subcomponent 轻松接收到父 component 的事件代码哟!这俩小伙伴可谓功不可没！尤其是$listeners，就像个神奇的收藏夹，把所有的 event listeners统统装了进去。使得操作变得易如反掌，只需要放到高级组件上就能轻松搞定啦!

你搞编程的时候，怎么把爸爸组件和宝贝组件连接起来？就是用这个$listeners！它可以帮助爸爸组件的监听器传给宝贝组件，然后由宝贝组件自己来处理这些事情。

比如，要做个简单的按钮，能感应到鼠标点击但又不影响别的功能，那就该它出场！对，就是那个神奇的$listeners魔法棒！用了它，就像请了个私人助手，把任何鼠标点都送到按钮的每个角落里头，这样子，你的按钮想怎么工作就怎么工作，而且特别方便做些小修改和调整，太实用了！

示例演示

  

    
Parent Component
    
    
  


import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  }
}

你想了解attrs和listeners这两个小东西如何帮你搞定组件间聊天问题？那就让我给你简单说说。

搞定老爸组件中那个强大的牛逼功能，用$attrs和$listeners这对小帮手，就能教会你的小家伙如何操作哦～

javascript

然后，小弟弟们就能轻松用到大哥哥们传下来的特性和本领。

  

    
Child Component
    
    
{{ $attrs.message }}
    
    Click me
  


export default {
  mounted() {
    console.log(this.$attrs); // 输出所有属性
    console.log(this.$listeners); // 输出所有事件监听器
  }
}

{{$attrs.text }}

看了这例子，你就会理解咋用$attrs和$listeners解决子组件父组件问题。体验下Vue的牛逼之处，好使又灵活！

注意事项及总结

用$ attrs和$ listeners，要记住这些点哦：

别忘了，我这$attrs跟$listeners主要是给咱小圈子设计的。就只是咱自家小部件能用的小技巧哦～

别碰那啥$attrs和$listeners，这俩玩意儿咱们就甭操心，只瞅瞅还不行！

各位记住了，在小零件里面千万别动$attrs和$listeners这些代码！

给你说个秘密，Vue里面的$ attrs和$ listeners就是我们编程行家手里的瑞士军刀，用来解决代码难题就跟吃喝一样容易。用这种方法写代码，妥妥的顺滑，特别带劲儿！

我们什么时候有时间可以聊聊？就是关于那个项目，你处理过家长和孩子之间的交流问题吗？跟我分享一下呗，你们是怎么解决的？