vue 子组件屏蔽父组件的样式穿透
时间: 2023-11-30 22:43:01 浏览: 55
在Vue中,可以使用“深度作用选择器”来实现子组件屏蔽父组件的样式穿透。具体方法如下:
1.在父组件中,使用“/deep/”或“::v-deep”来修饰样式,以达到穿透子组件的效果。
2.在子组件中,使用“scoped”属性来限制样式的作用范围,以避免样式污染。
下面是一个示例代码:
```html
<!-- Parent.vue -->
<template>
<div class="parent">
<child></child>
</div>
</template>
<style scoped>
/* 父组件样式 */
.parent /deep/ .child-div {
color: red;
}
</style>
<script>
import Child from './Child.vue';
export default {
name: 'Parent',
components: {
Child
}
}
</script>
```
```html
<!-- Child.vue -->
<template>
<div class="child">
<div class="child-div">子组件中的样式</div>
</div>
</template>
<style scoped>
/* 子组件样式 */
.child-div {
color: blue;
}
</style>
<script>
export default {
name: 'Child'
}
</script>
```
在上面的代码中,父组件中使用了“/deep/”来修饰样式,以穿透子组件的样式。而子组件中使用了“scoped”属性来限制样式的作用范围,以避免样式污染。