淺談關于.vue文件中style的scoped屬性

本文介紹了.vue文件中style的scoped屬性以及踩到的坑，具體如下：

scoped可以實現style只作用于當前的.vue文件

<template>
  <div class="user"></div>
</template>
<script>

</script>

<style lang='less' scoped>
.user {
  color:#333;
}
</style>

上面的文件渲染出的dom結構會是這樣的

<div data-v-53795c54 class="user"></div>

css樣式是這樣的

.user[data-v-53795c54] {
  color:#333;
}

這樣就現實了樣式只作用于當前.vue文件。

問題：添加scoped屬性后樣式不起作用

原因是，css被構建成.user[data-v-53795c54] 但是doc節點依然是普通的<div class="user"></div>，導致樣式不能作用在dom上而失效。

原因在引用的組件上，解決的方法是將scoped屬性關閉。

scoped關閉時的使用建議

如果需要將scoped關閉，那么style就是作用于整個單頁應用

可是我們仍然想要樣式之作用于當前的.vue文件，減少對其他文件樣式的影響

1、給template下的根節點加一個class，并基于這個class添加樣式

<template>
<div class="user">
<p class="name">zaunk</p>
</div>
</template>
<script>

</script>

<style lang='less>
.user {
color:#333;
.name {
color:#122222;
}
}
</style>

2、基于第一條建議，不要有定義兩個相同class名稱的根節點，因為都作用于整個單頁會有一個失效。

3、不要使用 span {}這種做樣式設置。因為

<template>
<div class="user">
<el-button class="name">zaunk</el-button>
</div>
</template>
<style lang='less>
.user {
color:#333;
span {
color:#122222;
}
}
</style>

上面的樣式同樣會作用于組件el-button,這是很危險的

在vue組件中style scoped中遇到的坑

在uve組件中我們我們經常需要給style添加scoped來使得當前樣式只作用于當前組件的節點。添加scoped之后，實際上vue在背后做的工作是將當前組件的節點添加一個像data-v-1233這樣唯一屬性的標識，當然也會給當前style的所有樣式添加[data-v-1233]這樣的話，就可以使得當前樣式只作用于當前組件的節點。但是我們需要注意的是如果我們添加了子組件，同樣的，如果子組件也用scoped標識了，那么在父組件中是不能設置子組件中的節點的。若父組件有scoped，子組件沒有設置，同樣，也是不能在父組件中設置子組件的節點的樣式的，因為父組件用了scoped,那么父組件中style設置的樣式都是唯一的了，不會作用與其他的組件樣式，我在用vue-quill-editor富文本編輯器的時候就遇到了這個坑，我只是想讓內容區設置一個高度，這樣的話，是必須在App.vue中設置的，我們App.vue相當于根容器，沒有設置scoped，所以是可以設置的。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。