在对应的 CSS选择器 末尾添加一个当前组件的 data属性选择器来私有化样式，如：.demo[data-v-2311c06a]{}
如果引入 less 或 sass 只会在最后一个元素上设置
// 原始代码 <template> <div> <span> Vue.js scoped </span> </div> </template> <style lang="less" scoped> .demo{ font-size: 16px; .content{ color: red; } } </style> // 浏览器渲染效果 <div data-v-fed36922> Vue.js scoped </div> <style type="text/css"> .demo[data-v-039c5b43] { font-size: 14px; } .demo .content[data-v-039c5b43] { //.demo 上并没有加 data 属性 color: red; } </style>
36.2 deep 属性
// 上面样式加一个 /deep/ <style lang="less" scoped> .demo{ font-size: 14px; } .demo /deep/ .content{ color: blue; } </style> // 浏览器编译后 <style type="text/css"> .demo[data-v-039c5b43] { font-size: 14px; } .demo[data-v-039c5b43] .content { color: blue; } </style>