vue实现组件私有样式和深度选择符

什么叫私有样式？

当父组件中导入子组件的时候，如果父组件和子组件都设有样式，那么就会出现样式的冲突，这时候我们就需要借助scoped这个属性来让组件的样式私有。

导致样式冲突的原因

父组件是会导入子组件的，当webpack进行打包的时候，是会将两个组件打包到一块的，这样也就导致结构、样式和行为都会打包到一个共同的html文件中，那么如果子组件中和父组件同时用到一个样式的话，那么就会导致样式的冲突。

通过一张图来加深理解

解决方法

直接在需要私有化样式的组件中的style标签内部加上scoped属性。

<style scoped>
/* scoped让组件的样式私有 */
  p{
    color: yellow;
  }

scoped属性的原理

当我们给style标签添加上scoped属性后，那么vue会自动生成一个随机的自定义属性加在样式选择器的后面和结构标签中。

在结构中就会多一个自定义属性

在选择器上就会通过属性选择器接在标签选择器的后面

什么叫深度选择符？ 

/deep/就是深度选择符

它是为了解决什么问题？

当父组件和子组件的style标签里面都加上了scoped属性，导致样式私有化了，那么我想要在父组件中修改子组件中的样式就无法实现了，这时候我们就需要借助/deep/深度选择符来实现。

 /* 父组件里面修改子组件里面的button */
 /* /deep/深度作用选择符 */
div /deep/ button{
    color: pink;
}

它的实现原理是什么？

通过前面的讲解，我们已经知道了，想要让样式私有需要在style标签后面加上scoped属性，这个属性会在标签结构后面自动生成一个随机的自定义属性。通过下面的图，我们来看一下，当父组件中的自定义属性会出现在子组件的最外层的div里面，这也就说明子组件中也有父组件的自定义属性，那么我们就可以通过这个共有的自定义属性来改变子组件中结构的样式。

我要改变的是子组件中的button的颜色，在样式中就可以看见这个共有的自定义属性起了作用。不过这个自定义属性是出现在button标签的前面类似于后代选择器。