Vue3组件间传值 - 透传 - 15

父组件：

传给子组件class样式，子组件默认会直接被赋予此class名

  <child class="fatherToSon"></child>

子组件：

此时如果子组件提前布置好了此样式名的样式更改，那么会生效

<template>
  <div>我是透传的child</div>
</template>

<style scoped lang="css">
.fatherToSon {
  color: red;
}
</style>

阻止默认透传：

在子组件中新建script标签，加入inheritAttrs: false ，那么此时父传子的样式会被阻隔

<script>
export default {
  inheritAttrs: false, // 阻断后就不会默认接收父组件给的样式
};
</script>

但是阻隔了默认传递的样式，子组件并非未接收到此样式名

const attrs = useAttrs();
console.log(attrs.class); // fatherToSon

使用useAttrs钩子，也可以获取到父传子的样式