vue3 組件傳值之 props 與 attrs 的區別

最近在學習 vue3，整理了一些學習筆記，如果有人看到，並發現我有寫的不對的地方，歡迎指正~

用過 vue 組件傳值的小伙伴都知道 props 這個屬性，而 $attrs 屬性可以看做 props 的加強版，用來簡化 vue 組件傳值，那么這兩個屬性具體有什么區別呢？

先說結論，區別如下：

1、props 要先聲明才能取值，attrs 不用先聲明

2、props 聲明過的屬性，attrs 里不會再出現

3、props 不包含事件，attrs 包含

4、props 支持 string 以外的類型，attrs 只有 string 類型

下面是代碼演示：

在父組件中我傳了三個事件一個屬性，在子組件中分別將 props 和 attrs 的值打印出來

 

 

 

 結果顯示 props 是一個空對象，而 attrs 中包含了所有父組件傳遞的方法和屬性

 

 

 那如果我們在子組件中聲明了 props 呢？

 

 

 

將 size 屬性在 props 中進行聲明，再執行打印，果然 size 屬性出現在了 props 對象中，而 attrs 中這次卻沒有再體現：

 

 

 經過上面兩次打印，我們可以得出結論：

1、props 要先聲明才能取值，attrs 不用先聲明

2、props 聲明過的屬性，attrs 里不會再出現

props 中不可以聲明方法，所以可以得出第三點：

props 不包含事件，attrs 包含

接下來我們在父組件中增加一個值為 Boolean 的屬性

 

 

 看到出現在 attrs 中的 disabled 是一個 值為空字符串的屬性：

 

我們在 props 中聲明 disabled 為 Boolean 類型：

 

 

 

 重新打印結果：

 

 

 以上兩次打印得出第四條結論：

props 支持 string 以外的類型，attrs 只有 string 類型

下面貼出上面兩個文件的代碼，有興趣的小伙伴可以自己動手打印一下，如果覺得還不錯，麻煩點個贊哦

父組件：

<template>
<Button @click="onClick" @mouseover="onClick" @focus="onClick" size="small" disabled>
  你好
</Button>
</template>

<script lang="ts">
import Button from '../lib/Button.vue'
export default {
  components: {
    Button,
  },
  setup() {
    const onClick = () => {
      console.log('hi')
    }
    return {
      onClick,
    }
  },
}
</script>

子組件：

<template>
<div>
  <button>
    <slot />
  </button>
</div>
</template>

<script lang="ts">
export default {
  props: {
    size: String,
    disabled: Boolean,
  },
  setup(props, context) {
    console.log('props:', {
      ...props,
    })
    console.log('context.attrs:', {
      ...context.attrs,
    })
  },
}
</script>