作用

• 简化父子组件传值

  props 与 attrs 的区别

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

• props 声明过的属性，attrs 里不会再出现
• props 不包含事件，attrs 包含事件

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

  API

• 默认所有属性都绑定到根元素

• inheritAttrs: false 可以取消默认绑定
• $attrs | context.attrs 获取所有属性
• v-bind="$attrs" 绑定所有属性

• const {size, level, ...xxx(剩余所有)} = context.attrs 解构赋值

  示例

• 父组件

  <div>
    <Childern @click="x" @change="y" :value="z">  
  </div>

• 子组件

  <template>
    <div :value="value">     //默认所有属性绑定到子组件的根元素上,使用 inheritAttrs:false 取消绑定
    <button v-bind="xxx">  |  <button v-bind="$attrs">//绑定所有属性
      <slot/>
    </button>
    </div>
  </template>
  <script lang="ts">
    export default {
    inheritAttrs:false,
    setup(props,context){
      const {value,...xxx} = context.attrs
      return {value,xxx}
    }
    }
  </script>