在
vue
中,当< style>
标签有scoped
属性是,它的css
制作用与当前组件的元素.
也就是在我们日常开发中,父组件不能直接作用于子组件,这时候有两个方法:
一是把scoped
去掉,但是这样的话不仅是自己会影响别的元素,别的元素也会影响自身,所以这个方法一般不会使用.
二是在样式前面添加/deep/
或::v-deep
,还有个>>>
,箭头方法会有兼容问题,像Sass
之类的预处理器无法正确解析
应用场景一:父组件影响子组件
应用场景二:在页面中印象引入的样式
/deep/
/deep/.van-uploader__upload {
width: 90 * 100vw/360;
height: 90 * 100vw/360;
}
::v-deep
::v-deep.van-uploader__upload {
width: 90 * 100vw/360;
height: 90 * 100vw/360;
}