vue中的css深度监听

vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局，但如果你引用了第三方组件，默认只会对组件的最外层（div）加入这个 [data-v-xxxx] 属性，但第二层开始就没有效果了。导致子级的样式失效

解决办法：

1，除去scoped（最好不要，最蠢的办法，可能会影响其他地方的样式），或者在当前vue新建一个没有scoped的style

<style lang="css" scoped>
.header {
    ...
}
</style>
<style lang="css">
.header .name {
    ...
}
</style>

　　

2，>>>深度作用选择器（缺点：只作用于css），如果是less或者sass的话可以使用/deep/或者::v-deep(官方建议使用后者)

<style lang="css" scoped>
.normal-btn>>>i, .normal-btn>>>span {
    ....
}
</style>

　　

// 使用/deep/
<style lang="less" scoped>
/deep/ .refresh-btn {
    ...
}
</style>
// 使用::v-deep，目前试了在vue2.0中::v-deep不生效
<style lang="less" scoped>
::v-deep .refresh-btn {
    ...
}

　　

这里看来，比较推荐使用方法二的/deep/，但是在vue3.0会报错，建议改为::v-deep，方法一有后遗症而且增加更多的代码量