Vue3 组件传值 props 和 attrs 区别

区别如下：

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

2、props 声明过的属性，attrs 里不会再出现

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

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

在父组件中我传了三个事件一个属性，在子组件中分别将 props 和 attrs 的值打印出来：

//  父组件
<template>
<Button @click="onClick" @mouseover="onClick" @focus="onClick" size="small">
  hi
</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 {
  setup(props, context) {
    console.log('props:', {
      ...props,
    })
    console.log('context.attrs:', {
      ...context.attrs,
    })
  },
}
</script>

结果显示 props 是一个空对象，而 attrs 中包含了所有父组件传递的方法和属性

//  子组件中声明 props 
<template>
<div>
  <button>
    <slot />
  </button>
</div>
</template>

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

将 size 属性在 props 中进行声明，再执行打印，果然 size 属性出现在了 props 对象中，而 attrs 中这次却没有再体现：

接下来我们在父组件中增加一个值为 Boolean 的属性

//  父组件中增加一个值为 Boolean 的属性
<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>

看到出现在 attrs 中的 disabled 是一个 值为空字符串的属性：

我们在 props 中声明 disabled 为 Boolean 类型：

//  子组件 props 中声明 disabled 为 Boolean
<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>

重新打印结果：