vue中通過使用$attrs實現組件之間的數據傳遞功能

更新時間：2019年09月01日 16:20:48 作者：學霸貓

組件之間傳遞數據的方式有很多種，之所以有這么多種方式，是為了滿足在不同場景不同條件下的使用。這篇文章主要介紹了vue中通過使用$attrs實現組件之間的數據傳遞,需要的朋友可以參考下

組件之間傳遞數據的方式有很多種，之所以有這么多種方式，是為了滿足在不同場景不同條件下的使用。

一般有三種方式：

props
vuex
Vue Event Bus

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

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

這個api是在2.4版本中添加的，那么為什么要添加這個特性呢？
看看官網是怎么解釋的

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

當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外)，

并且可以通過 v-bind="$attrs" 傳入內部組件——在創(chuàng)建高級別的組件時非常有用。

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

意思就是： $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的用法啦。

總結

以上所述是小編給大家介紹的vue中通過使用$attrs實現組件之間的數據傳遞功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章: