Vue2.4中$attrs，$listeners，inheritAttrs的使用和理解

先来看一张图如下

vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈的方法，然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$attrs，$listeners，inheritAttrs这三个属性。

inheritAttrs、attrs和attrs和listeners使用场景：

组件传值，尤其是祖孙组件有跨度的传值。

简单的来介绍这三个属性：

1、inheritAttrs

官方介绍：https://cn.vuejs.org/v2/api/#inheritAttrs

这里其实介绍的很隐晦，详细可移步https://www.jianshu.com/p/ce8ca875c337，其实就是如下图：

 渲染后下过如下：图片来自https://www.jianshu.com/p/ce8ca875c337

组件内未被注册的属性将作为普通html元素属性被渲染，如果想让属性能够向下传递，即使prop组件没有被使用，你也需要在组件上注册。这样做会使组件预期功能变得模糊不清，当我们把 inheritAttrs设置为false的时候就不会出现这种情况了。

2、$attrs

官方介绍：https://cn.vuejs.org/v2/api/#vm-attrs

通俗的理解为：子辈可以通过$attrs将未在自己组件内注册的祖辈传递下来的参数接收来，并传递孙辈

如下图：

 

3、 $listeners

官方介绍：https://cn.vuejs.org/v2/api/#vm-listeners

官方介绍的很简隐晦，很多人可能无法理解，其实就是我们在子辈上绑定 v-on=”$listeners”, 在祖辈组件中，监听孙辈组件触发的事件。就能把孙辈组件发出的数据，传递给祖辈组件。如下：

 

 

demo运行结果如下：

 

点击按钮后：

 

demo源码分享：

祖辈

<template>
 <div class="demo">
   <child-dom
    :foo="foo"
    :coo="coo"
     v-on:upRocket="reciveRocket"
   >
   </child-dom>
 </div>
</template>
<script>
import childDom from './children'
export default {
  name: 'ancestors',
  data () {
    return {
      foo: '我是子辈',
      coo: '我是现在是祖先哪里接收来的值，点击下面按钮我会被孙辈改变'
    }
  },
  components: {childDom},
  methods: {
    reciveRocket () {
      this.coo = '我被我的孙辈改变了'
    }
  }
}
</script>
<style lang="less" scoped>
 .demo{
   color:#fff;
   margin-top:200px;
   text-align:center
 }
</style>

 子辈

<template>
 <div>
 <p>foo:{{foo}}</p>
 <p>我是要传给孙辈的attrs:{{$attrs}}</p>
 <grandchildren v-bind="$attrs" v-on="$listeners"></grandchildren>
 </div>
</template>
<script>
import grandchildren from './grandchildren'
export default {
  name: 'children',
  components: {grandchildren},
  props: ['foo'],
  inheritAttrs: false // 阻止默认行为 默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上
}
</script>

孙辈：

<template>
 <div>
 <p>coo:{{coo}}</p>
 <button @click="startUpRocket">我是孙辈，我要发射火箭</button>
 </div>
</template>
<script>
export default {
  name: 'grandchildren',
  props: ['coo'],
  methods: {
    startUpRocket () {
      this.$emit('upRocket')// 直接触发祖辈方法
    }
  }
}
</script>

欢迎关注我的公众号：bb妞，我放置了很短前端相关书籍，分享给每一位在前端道路上拼搏的朋友！