VUE解决组件样式冲突的问题

VUE解决组件样式冲突的问题_第1张图片

如何解决?(less写法)

在style标签上加个scoped即可
VUE解决组件样式冲突的问题_第2张图片
原理:加上scoped就会自动为当前组件内的样式添加data-v-编码,属性,同时在标签内加上这种唯一的属性,可以控制台查看文档结构去检验
但是上面方法还是有缺陷的
上面方法可以解决组件内样式问题,但是对于它里面的复用的组件的样式完全不做改变,就是只改变它自己的样式,引用的样式没改变,这就是一种缺陷
例如这里的H5标签是引用的组件内的
VUE解决组件样式冲突的问题_第3张图片
它此时没有加上样式data-v-编码
那怎么能让复用的组件的标签有样式呢?
只需要在样式前面加个 /deep/ 即可
VUE解决组件样式冲突的问题_第4张图片

然后再浏览器看到以下样式(后代选择器,父标签下面有个H5,和刚刚的标签选择器不同了)
VUE解决组件样式冲突的问题_第5张图片
这种就能实现跨组件加样式了
当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到/deep/

纯css和sass写法

VUE解决组件样式冲突的问题_第6张图片

你可能感兴趣的:(vue,vue.js,前端,css)