vue中scoped让css样式只作用于当前文件的原理
如果在vue文件中的style标签中写上了scoped属性, 就代表在此style标签中所写的所有样式, 都只会作用于当前组件中的布局, 不会影响其他组件, 哪怕是子组件
scoped通过给当前文件的template内所有标签加上 data-v-(hash) 的属性 的方式，让每个vue文件标签都拥有不同的一个属性，给vue文件中的style标签加上scoped属性后，css选择器在编译时会自动加上data-v-(hash) 选择器，这样就达到了筛选当前文件标签的目的
如果我们想控制子组件内部布局的样式
使用样式穿透 语法
/deep/
使用方式：找到当前标签的父标签，确保父标签有data-v-hash，如果没有，继续往上找
在父选择器前面加 /deep/::v-deep
使用方式：在自己前面加>>>
使用方式：父选择器 >>> 自己