【vue】$attrs的作用和使用方法

之前一直不了解$attrs的作用和使用场景，然后自己翻阅了相关资料整理了下，如有不对的地方请大家指教

$attrs：

　　$attrs是vue版本2.40以上新增的属性；

　　使用场景：

　　　vue项目里面，大家肯定遇到过组件之间的传值问题，父传子、子传父、非父子之间传值等等；

　　　假如说我们碰到一个多层组件之间的传值，可以用$emit、$on可以解决这个问题，但是操作太过于繁琐了，或者使用vuex也可以去实现，但是有点大材小用杀鸡用了宰牛刀。

　　　然后 $attrs 就是用来解决这个问题的!

 

　　   官方解释：

　　　　$attr：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，

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

　　　

　　　如果给组件传递的数据，组件不使用props接收，那么这些数据将作为组件的HTML元素的特性，这些特性绑定在组件的HTML根元素上
　　　inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不会显示在子组件的dom元素上，但是在组件里可以通过其$attrs可以获取到没有使用的注册属性, ``inheritAttrs: false`是不会影响 style 和 class 的绑定

 

　　下面看实际用例（父组件的列表行数据传递给孙子组件展示）：

1. 父组件（Father.vue），给子组件关联数据，子组件如果不用props接收，那么这些数据就作为普通的HTML特性应用在子组件的根元素上

   <template>
     <div>
       <el-table :data='list'>
         <el-table-column
           prop="name"
           label="姓名"
         ></el-table-column>
         <el-table-column
           prop="study"
           label="学习科目"
         ></el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button @click='transmitClick(scope.row)'>传递</el-button>
           </template>
         </el-table-column>
       </el-table>
       
       <!-- 儿子组件 -->
       <ChildView
         :is-show="isOpen"
         :row="row"
       >
       </ChildView>
     </div>
   </template>
   
   <script>
   import ChildView from './Child.vue'
   export default {
     components: { ChildView },
     data() {
       return {
         isOpen: false,
         row: {},
         list: [
           { name: '王丽', study: 'Java' },
           { name: '李克', study: 'Python' }
         ]
       }
     },
     methods: {
       // 传递事件
       transmitClick(row) {
         this.isOpen = true;
         this.row = row
       }
     }
   }
   </script>

2. 儿子组件（Child.vue），中间层，作为父组件和孙子组件的传递中介，在儿子组件中给孙子组件添加v-bind="$attrs"，这样孙子组件才能接收到数据

   <template>
     <div class='child-view'>
       <p>儿子组件</p>
       <GrandChild v-bind="$attrs"></GrandChild>
     </div>
   </template>
   
   <script>
   import GrandChild from './GrandChild.vue'
   export default {
     // 继承所有父组件的内容
     inheritAttrs: true,
     components: { GrandChild },
     data() {
       return {
       }
     }
   }
   </script>
   
   <style lang="stylus">
   .child-view {
     margin: 20px
     border: 2px solid red
     padding: 20px
   }
   </style>

3. 孙子组件（GrandChild.vue），在孙子组件中一定要使用props接收从父组件传递过来的数据

   <template>
     <div class='grand-child-view'>
       <p>孙子组件</p>
       <p>传给孙子组件的数据：{{row.name}} {{row.name !== undefined? '学习' : ''}} {{row.study}}</p>
     </div>
   </template>
   
   <script>
   export default {
     // 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
     inheritAttrs: false,
     // 在本组件中需要接收从父组件传递过来的数据，注意props里的参数名称不能改变，必须和父组件传递过来的是一样的
     props: {
       isShow: {
         type: Boolean,
         dedault: false
       },
       row: {
         type: Object,
         dedault: () => { }
       }
     }
   }
   </script>
   
   <style lang="stylus">
   .grand-child-view {
     border: 2px solid green
     padding: 20px
     margin: 20px
   }
   </style>

   总结：当我们涉及到多层传参的时候，父组件传出去的值，中间的组件不用通过props接收，但是要在子组件（中间组件）身上通过v-bind="$attrs",这样最下层的组件才能拿到最外层组件传过来的值