這篇文章帶給大家的內容是關於Vue中的scoped的實現原理以及scoped穿透的用法（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
在Vue檔案中的style標籤上有一個特殊的屬性，scoped。當一個style標籤擁有scoped屬性時候，它的css樣式只能用於目前的Vue組件，可以使組件的樣式不互相污染。如果一個項目的所有style標籤都加上了scoped屬性，相當於實現了樣式的模組化。
Vue中的scoped屬性的效果主要是透過PostCss實現的。以下是轉譯前的代碼:
<style scoped>
.example{
color:red;
}
</style>
<template>
<div>scoped测试案例</div>
</template>轉譯後:
.example[data-v-5558831a] {
color: red;
}
<template>
<div class="example" data-v-5558831a>scoped测试案例</div>
</template>既:PostCSS給一個組件中的所有dom添加了一個獨一無二的動態屬性，給css選擇器額外添加一個對應的屬性選擇器，來選擇元件中的dom,這種做法使得樣式只作用於含有該屬性的dom元素(元件內部的dom)。
總結：scoped的渲染規則：
為HTML的dom節點新增一個不重複的data屬性(例如: data-v-5558831a)來唯一標識這個dom 元素
在每句css選擇器的結尾(編譯後產生的css語句)加上一個目前元件的data屬性選擇器(例如：[data-v-5558831a])來私有化樣式
scoped看起來很好用，當時在Vue專案中，當我們引入第三方元件庫時(如使用vue-awesome-swiper實作行動裝置輪播)，需要在局部元件中修改第三方元件庫的樣式，而又不想去除scoped屬性造成元件之間的樣式覆蓋。這時我們可以透過特殊的方式穿透scoped。
stylus的樣式穿透 使用>>>
外层 >>> 第三方组件 样式 .wrapper >>> .swiper-pagination-bullet-active background: #fff
sass和less的樣式穿透 使用/deep/
外层 /deep/ 第三方组件 {
样式
}
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff;
}上面我們介紹了在使用scoped 屬性時，透過scopd穿透的方式修改引入第三方元件庫樣式的方法，下面我們介紹其它方式來修改引入第三方元件庫的樣式
在vue組件中不使用scoped屬性在vue組成中使用兩個style標籤，一個加上scoped屬性，一個不加scoped屬性，把需要覆蓋的css樣式寫在不加scoped屬性的style標籤裡建立一個reset.css(基礎全域樣式)文件，裡面寫覆蓋的css樣式，在入口文件main.js 中引入
相關文章推薦：
以上是Vue中的scoped的實作原理以及scoped穿透的用法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
