首頁 > 軟體

Vue祖孫元件如何實現傳值

2023-03-25 06:01:30

先看基礎

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

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

$props

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

$attrs

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

如果元件沒有宣告任何 prop 時,這裡會包含所有父作用域的繫結 (classstyle 除外),並且可以通過 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 吧。不過這和傳值之間關係不大。

inheritAttrsvue 2.4.0 的新增選項,官方的介紹是醬紫的。

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

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


IT145.com E-mail:sddin#qq.com