父组件:
传给子组件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钩子,也可以获取到父传子的样式