在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,所以是可以設置的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue中style下scoped的屬性的原理 vue中style后面的scoped的作用 vue單文件組件中scoped屬性原理 VUE中 style scoped 修改原有樣式 vue中使用less出現的問題(style中使用less設置 scoped 遇到的坑) vue組件中的樣式屬性--scoped Vue中的scoped和scoped穿透 部分渲染失效"> 【踩坑記錄】vue單個組件內