之前一直不瞭解$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",這樣最下層的元件才能拿到最外層元件傳過來的值