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，方法一有后遺症而且增加更多的代碼量