vue 中 scoped 的原理
阿新 • • 發佈：2021-01-03
技術標籤：vue
之前寫 vue 頁面的時候，使用的是 快捷方式，打出 vue 之後使用 tab 鍵，就可以快捷的創建出 vue 頁面的 template，script 和 style，之前一直有注意到 style 中有一個 scoped 的屬性，但是一直不知道是幹啥的。今天一個前輩給我講了，所以記錄下來，以供日後複習。
作用功能：
實現組建的私有化，不對全域性的樣式造成汙染，在 style 中使用 scoped 表示當前的 style 屬性只屬於當前模組。使用起來非常方便，但是本身也有一定的缺點。
實現原理
通過觀察 DOM 結構可以發現：vue 通過 DOM 結構以及 css 樣式上加上唯一的標記，保證唯一，達到樣式私有化，不汙染全域性的作用。如下圖，樣式屬性上會多一個字元：
可以看出來，加上
scoped 後的元件裡面的標籤會多一個 data-v-300bf50c 的屬性，並且在css 的樣式部分可以看出
由此可知，新增
scoped 屬性的元件，為了達到不汙染全域性，做了一下處理：
- 給 HTML 的 DOM 節點加了一個不重複屬性
data-v-300bf50c標誌唯一性； - 在新增 scoped 屬性的元件的每個樣式選擇器添加了相同的欄位，實現類似於 “區域性作用域”，不會影響到全域性。
- 父元件的樣式不會影響子元件，子元件的樣式也不會汙染到父元件。
tips：
比如使用 element-UI 時，想要修改 element-UI的樣式，可以使用/deep/ .el-table{}
如：
<style lang="lsess" scoped>
.text-box {
/deep/ input {
width: 166px;
text-align: center;
}
}
</style>