vue中style scope深度訪問新方式(::v-deep)

1、>>>

如果vue的style使用的是css，那么則

<style lang="css" scoped>
.a >>> .b { 
   /* ... */ 
}
</style>

　　

但是像scss等預處理器卻無法解析>>>，所以我們使用下面的方式.

2、/deep/

<style lang="scss" scoped>
.a{
   /deep/ .b { 
      /* ... */ 
   }
} 
</style>

　　

但是有些開發者反應，在vue-cli3編譯時，deep的方式會報錯或者警告。
此時我們可以使用第三種方式

3、::v-deep

切記必須是雙冒號

<style lang="scss" scoped>
.a{
   ::v-deep .b { 
      /* ... */ 
   }
} 
</style>

　　

下面貼上node_modules中的一段解析scope的源碼

 

 

原文地址：https://segmentfault.com/a/1190000021576348