1. 属性绑定

vue3会将组件上的属性自动绑定到组件内部的根元素上

//父组件的使用
<template>
  <Button @click="Onclick">button组件</Button>
</template>

//组件内
<template>
  <div>
    <button>
      <slot/>
    </button>
  </div>
</template>

实际上Vue会将onclick事件直接绑定在div元素上，但是如果我们要将事件绑定在button上呢

<script lang="ts">

 export default {
   inheritAttrs:false
  }
</script>

将inheritAttrs设置成false就可以阻止根元素继承外部绑定属性

$attrs可以获取到外部传入的所有属性,接着我们将外部属性分离后，绑定到相应的元素上

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

也可以在setup中的context里分离出所有属性，并将其分成两部分

<script lang="ts">

  export default {
    inheritAttrs: false,
    setup(props, context) {
      const {onClick,...rest} = context.attrs;
      return {onClick,rest}
    }
  };
</script>