Vue祖孫組件如何實現(xiàn)傳值
先看基礎(chǔ)
祖孫組件，也就是 3 層嵌套的組件。關(guān)于 vue 中父子組件之間的數(shù)據(jù)傳遞是通過 props 和 $emit 實現(xiàn)，參考 Vue 父子組件傳值。
那祖孫組件之間傳值怎么實現(xiàn)，先了解下面的幾個 vue 屬性。
$props
當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象 property 的訪問。
$attrs
$attrs 是一個 Object，它包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。
如果組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件。
怎么理解呢？
就是父組件綁定到子組件上的屬性，在子組件中沒有聲明 props 進行接收的那些屬性會被包含在 attrs 中，舉個栗子
在父組件中對子組件綁定了兩個屬性 data1 data2。
parent.vue
<Child :data1="data1" :data2="data2" />
<script>
import Child from './child'
...
data(){
return{
data1: 'String',
data2: ['String','Array']
}
}
...
</script>
但在子組件的 props 只對 data1 做了接收聲明，那 data2 就會被包含在 $attrs 中。
在子組件中也是可以取到 $attrs 的值的，既然是對象，那就還可以按照屬性名來取值的。
child.vue
<template>
<div>
<div>$attrs: {{ $attrs }}</div>
<div>data2: {{ $attrs['data2'] }}</div>
</div>
</template>
<script>
...
props: ['data1'], /* <--看這里，只對data1做接收聲明 */
data(){
return{...}
}
...
</script>
其實到這里還沒有結(jié)束，接著聊聊 inheritAttrs 吧。不過這和傳值之間關(guān)系不大。
inheritAttrs 是 vue 2.4.0 的新增選項，官方的介紹是醬紫的。
1?? 默認情況下父作用域的不被認作 props 的 attribute 綁定 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上。當撰寫包裹一個目標元素或另一個組件的組件時，這可能不會總是符合預(yù)期行為。通過設(shè)置 inheritAttrs 到 false，這些默認行為將會被去掉。
2?? 而通過 (同樣是 2.4 新增的) 實例 property $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的綁定到非根元素上。
?? 注意：這個選項不影響 class 和 style 綁定。
第1??簡單理解就是前面說的，在子組件中的 props 沒有聲明接收的屬性（也就是 $attrs 所包含的屬性）會被綁定到這個子組件的 HTML 根節(jié)點上，我們檢查代碼也是可以看到的。
就像下面的例子，來自父組件的消息沒有被接收時會作為屬性被渲染到子組件的根節(jié)點上。
然后是使用 inheritAttrs: false 可以避免被渲染。
第2??說的就是可以通過 v-bind="$attrs" 把這些屬性綁定到其他的節(jié)點上（包括子節(jié)點，這是祖孫組件傳值的技術(shù)基礎(chǔ)）
$listeners
vue 2.4.0 新增
$listeners 是個 Object。包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件。
祖?zhèn)鲗O
在 vue 中，祖孫組件之間是不能直接通信的，需要通過父組件作為 中間組件。
實際上祖父的關(guān)系就是兩個 父與子 的關(guān)系。
1. $props 鏈
【不推薦使用】
既然是兩個父與子之間的關(guān)系，那就可以 祖?zhèn)鞲?/strong> 再由 父傳子。而 props 可以用來接收來自父組件的值，那就可以通過 props 實現(xiàn)鏈式傳遞了。不舉栗子??了，舉個香蕉吧??。
傳遞次序：GrandFather → Father → GrandSon
① 在 GrandFather 中給 Father 傳遞了兩條消息。
GrandFather.vue
<template>
<div class="parent">
??爺爺
<Father :msg1="msg1" :msg2="msg2" />
</div>
</template>
<script>
import Father from './Father'
export default {
components: {Father},
data () {
return {
msg1: '1??我是GrandFather，把第二條傳給GrandSon',
msg2: '2??GrandSon你好，我是GrandFather'
}
}
}
</script>
② Father 中使用 props 接收了來自 GrandFather 的所有消息。是的，他把所有的消息都收下了而且還可以隨便看??。
當然，使用 props 鏈傳遞就必須要 Father 接收之后才能繼續(xù)傳遞。
看完消息之后，Father 按照 GrandFather 的意思，把 msg2 傳遞給了 GrandSon
Father.vue
<template>
<div class="parent">
??父親
<p>GrandFather說：{{msg1}}。{{msg2}}</p>
<GrandSon :msg2="msg2" />
</div>
</template>
<script>
import GrandSon from './GrandSon'
export default {
props: ['msg1', 'msg2'],
components: {GrandSon},
}
</script>
③ 終于到 GrandSon 了，它通過 props 從 Father 那里接收到了來自 GrandFather 的消息。
GrandSon.vue
<template>
<div class="child">
??孫子
<p>GrandFather說：{{msg2}}</p>
</div>
</template>
<script>
export default {
props: ['msg2']
}
</script>
小結(jié)
這種方式雖然是比較容易理解，但也是比較繁瑣的。中間組件需要接收所有的 props 等。
2. $attrs
上面的 $props 傳值方式必須要經(jīng)過 Father 接收之后繼續(xù)傳遞，也是個缺點，畢竟 Father 還是很忙的，要負責(zé)自己的功能，不能總為爺孫倆接傳消息??。
vue 在 2.4.0 版本中新增了 $attrs 屬性。根據(jù)前面的理解 $attrs 就是沒有在 props 中聲明要接收的一些屬性。此外，還可以通過 v-bind="$attrs" 把來自父組件的一些屬性直接傳遞到子組件中。
這樣一來，Father 組件就沒必要在 props 中聲明接收那些不必要屬性了。看看實例吧！
① GrandFather 組件不用做修改
② 這次在 Father 中只在 props 接收了 msg1，與自己無關(guān)的直接使用 v-bind="attrs" 綁定到子組件上。
當然，在 Father 中還是可以訪問 $attrs 的。在代碼中訪問要使用 this.$attrs
Father.vue
<template>
<div class="parent">
??父親
<p>$attrs：{{$attrs}}</p>
<GrandSon v-bind="$attrs" />
</div>
</template>
<script>
import GrandSon from './GrandSon'
export default {
props: ['msg1'], //只接收了msg1
components: {GrandSon},
}
</script>
③ 子組件也不需要做修改
在 Father 中接收了 msg1，所以在 Father 中繼續(xù)傳遞到 GrandSon 的就只有 msg2 了。
孫傳祖
$listeners
給 Father 組件綁定 自定義事件 getReply ,便于后面在 GrandSon 中觸發(fā)
GrandFather.vue
<template>
<div class="parent">
??爺爺
<div>GrandSon的回復(fù)：{{reply}}</div>
<Father :msg1="msg1" :msg2="msg2" @getReply="getReply"/>
</div>
</template>
<script>
import Father from './Father'
export default {
components: {Father},
data () {
return {
msg1: '1??我是GrandFather，把第二條傳給GrandSon',
msg2: '2??GrandSon你好，我是GrandFather',
reply: '' //接收來自GrandSon的消息
}
},
methods: {
/* 將獲得的數(shù)據(jù)綁定到data中，便于視圖層渲染 */
getReply (param) {
this.reply = param
}
}
}
</script>
在 Father 中使用 v-on="$listeners" 把 GrandFather 的事件綁定到 GrandSon
Father.vue
<template>
<div class="parent">
??父親
<p>$attrs：{{$attrs}}</p>
<GrandSon v-bind="$attrs" v-on="$listeners" />
</div>
</template>
<script>
import GrandSon from './GrandSon'
export default {
props: ['msg1'],
components: { GrandSon },
}
</script>
在 GrandSon 中觸發(fā)來自 GrandFather 的自定義事件就 ?? 了，有兩種方式。
① this.$listeners.eventName(param)
② this.$emit(eventName, param)
GrandSon.vue
<template>
<div class="child">
??孫子
<p>GrandFather說：{{msg2}}</p>
<button @click="reply">回復(fù)GrandFather</button>
</div>
</template>
<script>
export default {
props: ['msg2'],
data () {
return {
replyWord: 'GrandFather你好，我是GrandSon，收到消息了'
}
},
methods: {
reply () {
this.$emit('getReply', this.replyWord)
// this.$listeners.getReply(this.replyWord)
}
}
}
</script>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+d3js+fastapi實現(xiàn)天氣柱狀圖折線圖餅圖的示例
本文主要介紹了vue+d3js+fastapi實現(xiàn)天氣柱狀圖折線圖餅圖的示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
Vue Router實現(xiàn)多層嵌套路由的導(dǎo)航的詳細指南
在 Vue 應(yīng)用中,使用 Vue Router 可以輕松實現(xiàn)多層嵌套路由的導(dǎo)航,嵌套路由允許你創(chuàng)建一個多層次的 URL 結(jié)構(gòu),這在構(gòu)建具有復(fù)雜導(dǎo)航結(jié)構(gòu)的應(yīng)用程序時非常有用,需要的朋友可以參考下2024-10-10
vue內(nèi)置組件component--通過is屬性動態(tài)渲染組件操作
這篇文章主要介紹了vue內(nèi)置組件component--通過is屬性動態(tài)渲染組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在 Vue.js 的項目中，如果項目結(jié)構(gòu)簡單， 父子組件之間的數(shù)據(jù)傳遞可以使用 props 或者 $emit 等方式，如果是大型項目，很多時候都需要在子組件之間傳遞數(shù)據(jù)，使用vue的狀態(tài)管理工具vuex很好的解決2018-08-08
vue組件中使用props傳遞數(shù)據(jù)的實例詳解
這篇文章主要介紹了vue組件中使用props傳遞數(shù)據(jù)的實例詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個基于Typescript開發(fā)的針對Vue3開發(fā)的UI組件庫,由TuSimple(圖森未來)公司開發(fā)并開源,需要的朋友可以參考下2023-08-08
在開發(fā)中,PDF預(yù)覽和交互功能是一個常見的需求,無論是管理系統(tǒng)、在線教育平臺,還是企業(yè)內(nèi)部的知識庫,能夠高效地展示和操作PDF文件都能極大地提升用戶體驗,本文將詳細介紹如何在Vue項目中實現(xiàn)pdf預(yù)覽功能,需要的朋友可以參考下2025-03-03
element?ui中el-form-item的屬性rules的用法示例小結(jié)
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了vue中的@click.native 原生點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了vue2 前端搜索實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02