在vue中經過使用$attrs實現組件之間的數據傳遞

組件之間傳遞數據的方式有不少種，之因此有這麼多種方式，是爲了知足在不一樣場景不一樣條件下的使用。

通常有三種方式：

1. 經過 props 的方式向子組件傳遞(父子組件)

2. vuex 進行狀態管理

3. 非父子組件的通訊傳遞 Vue Event Bus，使用Vue的實例，實現事件的監聽和發佈，實現組件之間的傳遞

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

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

這個api是在2.4版本中添加的，那麼爲何要添加這個特性呢？

看看官網是怎麼解釋的

包含了父做用域中不做爲 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。

當一個組件沒有聲明任何 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確定是要聲明的，仍是props的用法啦。

最後須要注意的一點是，$attrs是要配合inheritAttrs： false使用的哦，具體爲何能夠看下官網教程https://cn.vuejs.org/v2/guide/components-props.html#%E9%9D%9E-Prop-%E7%9A%84%E7%89%B9%E6%80%A7禁用特性教程這一小節，可是其實講的也是不清楚，建議google一下吧。