組件之間傳遞數據的方式有很多種，之所以有這麼多種方式，是爲了滿足在不同場景不同條件下的使用。這篇文章主要介紹了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" 傳入內部組件——在創建高級別的組件時非常有用。
第一次看的話真是不容易看懂，這裏是既包含用法又隱晦的說明了爲什麼使用，還是我來解釋一下吧。
意思就是： $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實現組件之間的數據傳遞功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！