props与attrs区别

500 阅读1分钟

props和attrs都能够获取到外部属性,二者区别在于

  • props需要先声明才能获取,attrs不需要
  • props不包含事件,attrs包含
  • props没有声明的属性才会被attrs声明
  • props支持spring以外的类型,attrs只支持spring类型

示例:

// parent ButtonDemo.vue
<template>
    <div>
        Button 示例
    </div>
    <h1>示例1</h1>
    <div>
        <Button disabled>你好</Button>
        // 或<Button :disabled="true">你好</Button>
        
    </div>
</template>

attrs中disabled为空字符串

<template>
   <button v-bind="$attrs">
        <slot />
   </button>
</template>

props中disabled为true

<template>
   <button :disabled="disabled">
        <slot />
   </button>
</template>
   <script lang="ts">
    export default{
        props:{
         disabled:Boolean
        }
    }