个人如何做公益网站,在线免费logo生成器,做网站的注意什么,想做电商怎么找货源经常开发前端的程序员应该都知道前端一般都是组件化开发#xff0c;为了避免样式污染通常会使用scoped添加属性选择器#xff0c;此时如果我们想在父组件中修改子组件的样式便成了难题。其实#xff0c;我们可以通过以下几种方式修改子组件样式#xff0c;
组件样式穿透
…经常开发前端的程序员应该都知道前端一般都是组件化开发为了避免样式污染通常会使用scoped添加属性选择器此时如果我们想在父组件中修改子组件的样式便成了难题。其实我们可以通过以下几种方式修改子组件样式
组件样式穿透
我们可以直接在父组件调用子组件时给组件添加样式此方案只能添加子组件最外一层样式如下
!--子组件--
templete
div classchild-test1div classchild-test2/div
/div
/templete
script langts setup
defineOptions({name:childComponent
})
/script
style scoped langscss
.child-test1{width:100px;height:100px;background:red;.child-test2{width:50px;height:50px;background:green;}
}
/style
!--父组件--
templete
div classfather-test1test classfather-test2/test
/div
/templete
script langts setup
import test from test.vue
defineOptions({name:FatherComponent
})
/script
style scoped langscss
.father-test1{width:200px;height:200px;.father-test2{background:yellow;}
}
/style
deep样式穿透
通过deep穿透样式我们可以更改子组件内部任意样式如下
!--父组件--
templete
div classfather-test1test/test
/div
!--错误示例-
!--divtest classfather-test1/test
/div--
/templete
script langts setup
import test from test.vue
defineOptions({name:FatherComponent
})
/script
style scoped langscss
:deep(.father-test1){width:200px;height:200px;.child-test2{background:yellow;}
}
/style
注意使用deep的演示类不能挂载在组件上否则不生效
