元件之間傳遞資料的方式有很多種，之所以有這麼多種方式，是為了滿足在不同場景不同條件下的使用。

一般有三種方式：

1. 通過 props 的方式向子元件傳遞(父子元件)

2. vuex 進行狀態管理

3. 非父子元件的通訊傳遞 Vue Event Bus，使用Vue的例項，實現事件的監聽和釋出，實現元件之間的傳遞

本文介紹的是使用$attrs的方式。

這是$attrs的官網api https://cn.vuejs.org/v2/api/#vm-attrs

這個api是在2.4版本中新增的，那麼為什麼要新增這個特性呢？

看看官網是怎麼解釋的

包含了父作用域中不作為 prop 被識別 (且獲取) 的特性繫結 (

當一個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)，

並且可以通過 v-bind="$attrs" 傳入內部元件——在建立高級別的元件時非常有用。

第一次看的話真是不容易看懂，這裡是既包含用法又隱晦的說明了為什麼使用，還是我來解釋一下吧。

意思就是：$attrs 可以收集父元件中的所有傳過來的屬性除了那些在元件中沒有通過 props 定義的。

引申說明一下，如果元件的巢狀層級有點深但又不那麼深，比如三層。

我們如果使用props的話，最裡面的元件想要獲取最外層元件的資料，就要通過中間的元件的props來傳遞，

但是這個props對於中間的這個元件沒啥用處，它就是做了一個橋樑而已。我們平時寫程式碼時候其實經常碰到

這種場景，寫起來有時候覺得挺煩的。所以就有了這個$attrs來幫助我們，不必在中間元件中寫props就可以讓

最裡面的元件拿到最外面元件傳進來的資料。

那麼，具體怎麼使用呢？

看看下面的程式碼吧，很簡單就懂了

準備三個元件

裡面的程式碼如下

//grandfather
<template>
  <div style="background: blue">
    father in grandfather
    <father :father-age="50" :child-time="`${time}`"></father>
  </div>
</template>
<script>
import father from './father'
export default {
  components: {
    father
  },
  data () {
    return {
      time: new Date().getTime()
    }
  }
}
</script>

//father
<template>
  <div style="background: red">
    child in father
    <div>
      <span>father age:</span>{{fatherAge}}
    </div>
    <child v-bind="$attrs"></child>
  </div>
</template>
<script>
import child from './child'
export default {
  components: {
    child
  },
  props: {
    fatherAge: {
      type: Number,
      default: 0
    }
  }
}
</script>

//child<template>
  <div style="background: green">
    <div>child</div>
    <div>time: {{childTime}}</div>
  </div>
</template>
<script>
export default {
  props: {
    childTime: {
      type: String,
      default: ''
    }
  }
}
</script>
 

需要從爺爺元件直接傳給子元件的資料，不要在父元件中的props中宣告。

在子元件上通過v-bind的方式就可以把父元件中未宣告而子元件需要從爺爺元件中獲取的資料傳給子元件。

當然，子元件props肯定是要宣告的，還