vue3的样式穿透

vue3如果在父组件里直接设置子组件的属性，那么子组件会自动继承传过来的属性

如果你不想要一个组件自动地继承 attribute，你可以在组件选项中设置 inheritAttrs: false。

从 3.3 开始你也可以直接在 <script setup> 中使用 defineOptions：

<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

如果想要穿透过来的attribute不是直接引用在最外层的元素上，比如：

<div>
    <button>我要继承</button>
</div>

如上所示，想要穿透过来的attribute放在button上，而不是放在div上，就可以通过设定inheritAttrs: false 和使用 v-bind="$attrs" 来实现：

<template>
<div>
  <button v-bind="$attrs">我要继承</button>
</div>
</template>
<script setup>
    defineOptions({
      inheritAttrs: false
    })
</script>