vue scoped官方说明
当style标签有scoped属性时，它的CSS 只作用于当前组件中的元素
设置scoped与不设置scoped的区别
打包后，设置scoped，会多一个data-v-hash属性。Post CSS给一个组件中的所有dom添加了一个独一无二的动态属性。使得样式只作用于含有该属性的dom，样式不互相污染。
原理
- 给HTML的DOM节点加一个不重复data属性（data-v-2311c06a），表示他的唯一性
- 在每句css选择器的末尾加一个当前组件的data属性选择器的哈希特征值来私有化样式。
慎用scoped
- 父组件无scoped属性，子组件带有scoped,父组件是无法操作子组件的样式的
- 父组件有scoped属性，子组件无，父组件也无法设置子组件样式。
- 父子组件都有，也无法设置样式
scoped穿透
vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，解决方法：
- 深度作用选择器
<style scoped>
.content {
width:100px;
margin:0 auto;
}
// 第一种
.content >>> .button {
color:red;
}
// 第二种
.content /deep/ .button {
color:red;
}
// 第三种
.content ::v-deep .button{
color:red;
}
</style>
