vue $attrs

1.$attr

• $attrs和inheritAttrs是在vue的2.40版本以上添加的。
• 项目中有多层组件传参可以使用$attrs，可以使代码更加美观，更加简洁，维护代码的时候更方便。如果使用普通的父子组件传参prop和$emit，$on会很繁琐；如果使用vuex会大材小用，只是在这几个组件中使用，没必要使用vuex；使用事件总线eventBus，使用不恰当的话，有可能会出现事件多次执行。
• 如果给组件传递的数据，组件不使用props接收，那么这些数据将作为组件的HTML元素的特性，这些特性绑定在组件的HTML根元素上
• inheritAttrs: false（默认true）的含义是不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不会显示在子组件的dom元素上，但是在组件里可以通过其$attrs可以获取到没有使用的注册属性, inheritAttrs: false 是不会影响 style 和 class

2.例子

Father.vue

<template>
  <div id="app">
    <h1>给外孙零花钱</h1>
    <input type="text"  v-model="money">
    <input type="text"  v-model="count">
    <Son class="yello" style="font-size: 17px" :class="obj" :count="count"  :money="money"/>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      money: "",
      obj: "header-top",
      count: " "
    }
  },
  components: {
    Son
  }
}
</script>
<style>
  #app{
    border: 2px dotted yellow;
    padding: 50px;
  }
</style>

Son.vue

<template>
  <div id="son"> 
    <h1>转交零花钱</h1>
    <GrandSon v-bind="$attrs" :value="value"/>
  </div>
</template>
  
<script>
import GrandSon from "./GrandSon";
export default {
  inheritAttrs: true,
  name: "Son",
  data() {
    return {
        value: 'son'
    };
  },
  props: {
    money: {
        type: String,
        default: ""
    }
  },
  created() {
    
  },
  updated() {
    console.log(this.$attrs)
  },
  components: {
    GrandSon,
  },
};
</script>
<style>
#son {
    border: 2px dotted green;
    padding: 50px;
}
</style>
  
  
  

Son.vue当props接收了父组件传递的money属性，这时this.$attrs中只有count属性可以传递。

inheritAttrs: false的含义

1. 不希望本组件的根元素继承父组件的attribute。
2. 父组件传递过来的属性（没有被子组件的props接收的属性）不会显示在子组件的dom元素上。

GrandSon.vue

<template>
  <div id="grandSon">
    <h1>收到零花钱</h1>
    {{ money }}
  </div>
</template>
  
<script>
export default {
  name: "GrandSon",
  data() {
    return {};
  },
  props: {
    money: {
      type: String,
      default: " ",
    },
  },
};
</script>
<style>
    #grandSon{
        padding: 50px;
        border: 2px dotted yellow;
    }
</style>