【前端小卡】对vue中$attrs与 inheritAttrs的理解

首先引入官方解释
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

####让我们用实例来进行说明

//app.vue
<template>
  <div id="app">
    <hello-world class="dark" :test="testa" :testb="testb" @welcome="sayHi" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  data(){
    return{
      testa:'hello',
      testb:'ccc'
    }      
  },
  components: {
    HelloWorld
  }
}
</script>

//helloworld.vue
<template>
  <div @click="hi">
    {{test}}
    {{$attrs.testb}}
  </div>
</template>

<script>
export default {
  //inheritAttrs: false,
  props:{
    test:{
      type:String,
      default:'hi'
    }
  }
}
</script>  

让我简单说明一下，我们看到子组件中prop没有接收testb,但是我们可以通过$attrs可以获取到testb，但是有一个缺点，我们可以看到 testb仍然出现div属性中

假如我们将子组件的inheritAttrs: false，让我们再看效果

看到效果了吧，有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会被赋予哪个元素。