props和attrs的区别

vue3示例 子组件

<template>
    <div @click="onClick" >
        <button >
            <slot />
        </button>
    </div>
</template>
<script lang="ts">
    export default {
        inheritAttrs: false,
        props: {
        size: String
    },
        setup(props,context){
            console.log(props);
            const{onClick,onMouseover,...rest} = context.attrs;
            console.log(context.attrs);
            return {onClick,onMouseover,rest}
        }
    }
</script>

父组件

<template>
    <div>Button 示例</div>
    <h1>示例1</h1>
    <div>
        <Button @click="onClick"
                @focus="onClick"
                @mouseover="onClick"
                size="small"
                level="normal"
                disabled
        >你好</Button>
    </div>
</template>

1. props要先声明才能取值，但是attrs不用
2. props不包含事件，但是attrs包含，即你是不能在props里面声明onlcick事件的
3. props没有声明的属性会跑到attrs里面
4. props支持string以外的类型，但是attrs只支持string类型