scoped可以实现style只作用于当前的.vue文件
<template> <div class="user"></div> </template> <script> </script> <style lang='less' scoped> .user { color:#333; } </style>
上面的文件渲染出的dom结构会是这样的
<div data-v-53795c54 class="user"></div>
css样式是这样的
.user[data-v-53795c54] { color:#333; }
这样就现实了样式只作用于当前.vue文件
注意:添加了scoped的父组件不能修子组件的样式
同样添加了scoped的子组件不能影响父组件的样式