快捷導(dǎo)航

vue中通過(guò)使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞功能

更新時(shí)間：2019年09月01日 16:20:48 作者：學(xué)霸貓

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

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

一般有三種方式：

props
vuex
Vue Event Bus

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

這是$attrs的官網(wǎng)api https://cn.vuejs.org/v2/api/#vm-attrs

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

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

當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 ( class 和 style 除外)，

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

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

意思就是： $attrs 可以收集父組件中的所有傳過(guò)來(lái)的屬性除了那些在組件中沒有通過(guò) props 定義的。

引申說(shuō)明一下，如果組件的嵌套層級(jí)有點(diǎn)深但又不那么深，比如三層。

我們?nèi)绻褂胮rops的話，最里面的組件想要獲取最外層組件的數(shù)據(jù)，就要通過(guò)中間的組件的props來(lái)傳遞，

但是這個(gè)props對(duì)于中間的這個(gè)組件沒啥用處，它就是做了一個(gè)橋梁而已。我們平時(shí)寫代碼時(shí)候其實(shí)經(jīng)常碰到

這種場(chǎng)景，寫起來(lái)有時(shí)候覺得挺煩的。所以就有了這個(gè)$attrs來(lái)幫助我們，不必在中間組件中寫props就可以讓

最里面的組件拿到最外面組件傳進(jìn)來(lái)的數(shù)據(jù)。

那么，具體怎么使用呢？

看看下面的代碼吧，很簡(jiǎn)單就懂了

準(zhǔn)備三個(gè)組件

里面的代碼如下

//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>

需要從爺爺組件直接傳給子組件的數(shù)據(jù)，不要在父組件中的props中聲明。

在子組件上通過(guò)v-bind的方式就可以把父組件中未聲明而子組件需要從爺爺組件中獲取的數(shù)據(jù)傳給子組件。

當(dāng)然，子組件props肯定是要聲明的，還是props的用法啦。

總結(jié)

以上所述是小編給大家介紹的vue中通過(guò)使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: