何为Scoped?

在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。

 

Scoped的实现原理

vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码:

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转译后:

<style>
.example[data-v-5558831a] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

即:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom。

 

为什么需要穿透Scoped?

scoped看起来很美,但是,在很多项目中,会出现这么一种情况,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped。

<style scoped>
    外层 >>> 第三方组件 {
        样式
    }
</style>

通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值。

 

曲线救国的办法

其实,还拥有一种曲线救国的方法,即在定义一个含有scoped属性的style标签之外,再定义一个不含有scoped属性的style标签,即在一个vue组件中定义一个全局的style标签,一个含有作用域的style标签:

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

此时,你只需要将修改第三方样式的css写在第一个style中即可。


晓锋

晓锋

只要心态是正确的,我们的世界就会的光明的。

17 条评论

头像

720p izle · 2020年12月10日 10:07

Enjoyed every bit of your article. Much thanks again. Much obliged. Naoma Pedro Jarrell

头像

takipçi satın al · 2021年1月31日 01:11

Takipçi satın almak için tıklayın. Hemen tıklayın ve takipçi satın al
sayfamızdan takipçi satın alın.

头像

movie online · 2021年1月31日 14:05

When I initially commented I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on every time a comment is added I receive four emails with the same comment. Perhaps there is a means you are able to remove me from that service? Kudos!| Stephine Phil Mandych

头像

watch porn · 2021年1月31日 22:33

He looks and sounds like he’s gonna tell me that “it’s against railroad regulations to cross cars without a grownup!”. Shawnee Quinten Mattie

头像

altyazili · 2021年2月1日 05:15

Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across. It extremely helps make reading your blog significantly easier. Marquita Bertram Leigha

头像

movie online · 2021年2月1日 12:55

Hey there, I think your site might be having browser compatibility issues. When I look at your blog in Opera, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, amazing blog! Loraine Johann Bergmann

头像

movies · 2021年2月1日 14:49

Hello! Indeed thank you so much for reading the article. To God be the glory! Nike Aron Belicia

头像

altyazili · 2021年2月1日 17:42

What a stuff of un-ambiguity and preserveness of valuable familiarity on the topic of unexpected emotions. Timi Rubin Kampmeier

头像

torrent · 2021年2月1日 20:16

I think this is among the most vital information for me. Lenore Christoper Fasano

头像

720p · 2021年2月1日 22:13

Put tin foil on the bottom before putting anything in. Works like a charm. Plus, makes IP easier to clean. Emylee Claire Birmingham

头像

online · 2021年2月2日 05:55

Post writing is also a fun, if you be acquainted with then you can write otherwise it is difficult to write. Sonny Alonzo Vargas

头像

online · 2021年2月2日 07:54

To link your Facebook and Twitter accounts, open the Instagram app on your phone or tablet, and select the Profile tab in the bottom-right corner of the screen. Demetris Ambros Triplett

头像

netflix · 2021年2月2日 10:30

Thank you for the good writeup. It in truth used to be a amusement account it. Look advanced to far delivered agreeable from you! However, how can we keep in touch? Roz Bay Raine

头像

720p · 2021年2月2日 12:16

Pretty nice post. I just stumbled upon your weblog and wished to say that I have really enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again soon! Delilah Bennie Tomkin

头像

clan symbol · 2021年2月4日 08:09

clan symbol knight online clanlar için ücretsiz bir paylaşım sitesidir.

头像

hindi movie · 2021年2月6日 18:51

Having read this I believed it was extremely informative. Kelila Lief Tseng

头像

bedava · 2021年2月10日 20:37

After looking at a few of the blog posts on your blog, I truly appreciate your technique of writing a blog. I book marked it to my bookmark webpage list and will be checking back soon. Please check out my website too and tell me how you feel. Delilah Fairfax Evadnee

发表评论

邮箱地址不会被公开。 必填项已用*标注