Vue祖孫元件如何實現傳值

2023-03-25 06:01:30

先看基礎

祖孫元件，也就是 3 層巢狀的元件。關於 vue 中父子元件之間的資料傳遞是通過 props 和 $emit 實現，參考 Vue 父子元件傳值。

那祖孫元件之間傳值怎麼實現，先了解下面的幾個 vue 屬性。

$props

當前元件接收到的 props 物件。Vue 範例代理了對其 props 物件 property 的存取。

$attrs

$attrs 是一個 Object，它包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 繫結 (class 和 style 除外)。

如果元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部元件。

怎麼理解呢？

就是父元件繫結到子元件上的屬性，在子元件中沒有宣告 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>

其實到這裡還沒有結束，接著聊聊 inheritAttrs 吧。不過這和傳值之間關係不大。

inheritAttrs 是 vue 2.4.0 的新增選項，官方的介紹是醬紫的。

1️⃣ 預設情況下父作用域的不被認作 props 的 attribute 繫結 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應用在子元件的根元素上。當撰寫包裹一個目標元素或另一個元件的元件時，這可能不會總是符合預期行為。通過設定 inheritAttrs 到 false，這些預設行為將會被去掉。

2️⃣ 而通過 (同樣是 2.4 新增的) 範例 property $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的繫結到非根元素上。

Vue祖孫元件如何實現傳值

目錄

先看基礎

$props

$attrs

熱門文章