vue中$attrs和$listeners以及inheritAttrs的用法

官方文档说明：

一、解释：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

意思就是父组件往子组件传没有在props里声明过的值时，子组件可以通过$attrs接受，且只包含父组件没有在props里声明的值。

父组件

<template>
  <div class="home">
    <child gender="male" age="18"/>
  </div>
</template>

<script>
import Child from '../components/Child'

export default {
  name: 'home',
  components: {
    Child,
  }
</script>

子组件

<template>
  <div>
     -----------------Child------------------
     <br>
     <span>gender: {{$attrs['gender']}}</span>
     <br>
     <span>age: {{$attrs['age']}}</span>
     <br>
  </div>
</template>

<script>
export default {
    name: 'Child'
}
</script>

<style>

</style>

结果图：

---

二、解释当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

意思就是： $attrs 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 props 定义的。引申说明一下，如果组件的嵌套层级有点深但又不那么深，比如三层。我们如果使用props的话，最里面的组件想要获取最外层组件的数据，就要通过中间的组件的props来传递，但是这个props对于中间的这个组件没啥用处，它就是做了一个桥梁而已。我们平时写代码时候其实经常碰到。这种场景，写起来有时候觉得挺烦的。所以就有了这个$attrs来帮助我们，不必在中间组件中写props就可以让最里面的组件拿到最外面组件传进来的数据。

爷组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <father :child2Data="`${child2Data}`"/>
  </div>
</template>

<script>
import Father from '../components/Father'

export default {
  name: 'home',
  components: {
    Father
  },
  data() {
    return {
      child2Data: '我是爷爷组件数据'
    }
  }
}
</script>

父组件

<template>
  <div>
      *********************father********************
      <child2 v-bind="$attrs"/>
  </div>
</template>

<script>
import Child2 from '../components/Child2';
export default {
    name: 'Father',
    components: {
        Child2
    }
}
</script>

<style>

</style>

子组件

<template>
<div>
    ====================Child2==================
    <br>
    <span>{{child2Data}}</span>
</div>
</template>

<script>
export default {
    name: 'Child2',
    props: {
        child2Data: String
    }
}
</script>

<style>

</style>

结果图

1、

2、

3、

---

官方文档：

解释：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

如下例子: 父组件的click事件包含了其父亲组件（即爷组件）的作用域

爷组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <father @click="handleBtnClick"/>     // 注意此处为click事件
  </div>
</template>

<script>
import Father from '../components/Father'

export default {
  name: 'home',
  components: {
    Father
  },
  data() {
    return {
      child2Data: '我是爷爷组件数据'
    }
  },
  methods: {
    handleBtnClick() {
            alert(this.child2Data)
        }
  }
}
</script>

父组件

<template>
  <div>
      *********************father********************
      <button v-on="$listeners">父组件</button>
  </div>
</template>

<script>
import Child2 from '../components/Child2';
export default {
    name: 'Father',
    components: {
        Child2
    }
}
</script>

<style>

</style>

---

解释：它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

如下例子：

爷组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <br>
    <father :child2Data="`${child2Data}`" @handle="handleBtnClick"/>    // 自定义一个handle点击指令
  </div>
</template>

<script>
import Father from '../components/Father'

export default {
  name: 'home',
  components: {
    Father
  },
  data() {
    return {
      child2Data: '我是爷爷组件数据'
    }
  },
  methods: {
    handleBtnClick() {
            alert(this.child2Data)
        }
  }
}
</script>

父组件

<template>
  <div>
      *********************father********************
      <child2 v-bind="$attrs" v-on="$listeners" />   //父组件通过v-on="$listeners"中转点击事件传给子组件
  </div>
</template>

<script>
import Child2 from '../components/Child2';
export default {
    name: 'Father',
    components: {
        Child2
    }
}
</script>

<style>

</style>

子组件

<template>
<div>
    ====================Child2==================
    <br>
    <span>{{child2Data}}</span>
    <br>
    <button @click="handleBtnClick">点击</button>
</div>
</template>

<script>
export default {
     inheritAttrs:false,
    name: 'Child2',
    props: {
        child2Data: String
    },
    methods: {
        handleBtnClick() {
            this.$emit('handle')   // 子组件即可访问爷组件的作用域
        }
    }
}
</script>

<style>

</style>

结果图：

inheritAttrs

其他用法学习博客：https://www.jianshu.com/p/4649d317adfe

参考博客：https://blog.csdn.net/m0_37115637/article/details/88779799