table of Contents
1 Brief description
When using vue recently, the blogger wrote that some styles did not take effect, how could they not take effect, but after removing the scoped in style, it actually took effect. Then the reason why the style does not take effect must be the ghost of scoped. After careful study Draw some conclusions, including why this happened and the solutions, share them here.
2 In-depth analysis
In order to facilitate display and understanding, the blogger here chooses a parent component and a child component , the
parent component: First, the parent component introduces the child component TestScoped
<template>
<div class="parent">
<p>Here is parent component</p>
<TestScoped />
</div>
</template>
<style>
.parent {
color: deepskyblue;
}
</style>
Subcomponent: TestScoped
<template>
<div class="son">
<p>Here is son component</p>
</div>
</template>
2.1 Do not add scoped
The result of HTML compilation at this time is:
<div class="parent">
<p>Here is parent component</p>
<div class="son">
<p>Here is son component</p>
</div>
</div>
Yes, it is what we understand. At this time, because the style is added to the parent component, then the Here is son component of the child component must also have this style, and the result is indeed the case.
<style>
p {
color: deepskyblue;
}
</style>
The rendered result.
2.2 Add scoped
That is, add scoped to the style of the parent component
<style scoped>
.p {
color: deepskyblue;
}
</style>
The result of HTML compilation at this time is:
<div data-v-7ba5bd90 class="parent">
<p data-v-7ba5bd90>Here is parent component</p>
<div data-v-7ba5bd90 class="son">
<p>Here is son component</p>
</div>
</div>
At this time of compiling the results can understand, that is, vue automatically add a unique attribute a label to each parent component, where attention, you will find vue to the root tag of sub-assemblies are also marked with a unique attribute of this, but the child The other labels of the components are not marked .
After compilation, you will find that the added css style becomes as follows: a unique tag is added, which is the principle of vue scoped to achieve style isolation
p[data-v-7ba5bd90] {
color: deepskyblue;
}
Since the sub-components except for the root tag thought that none of the other components were marked with the only label of the parent component, then it is conceivable that the style will not take effect in the sub-component, and the result is indeed the case.
Summary: Why do some styles not take effect after adding scoped to the vue component?
Reason: Vue's scoped has a unique attribute on all tags of this component, and this unique attribute is also added when the style takes effect. However, all sub-components applied by this component, except for the root tag, think that none of them have this unique tag. Therefore, the style will not take effect.
3 solution
3.1 Official solution
Click to view the official solution. The solution
given by vue is: Deep-acting selectors
If you want a selector in the scoped style to act "deeper", such as affecting subcomponents, you can use the >>> operator
somewhat like Sass Preprocessors like this cannot parse >>> correctly. In this case, you can use the /deep/ or ::v-deep operator instead-both are aliases for >>>, and they work fine.
Usually we will choose /deep/, the usage is as follows, add /deep/ where the sub-component style needs to take effect
<style scoped>
/deep/p{
color: deepskyblue;
}
</style>
At this time, the HTML compilation result will not change, but the effect of the style is different, it becomes as follows:
[data-v-7ba5bd90] p {
color: deepskyblue;
}
This makes css effective
3.2 The solution chosen by the blogger
Bloggers generally do not use /deep/, because it is too troublesome and they have to write in every place they need to be used. Therefore, the blogger’s choice is to use two styles, one of which adds scoped to write styles in the group, and the other does not Add and modify the style of sub-components
<style scoped>
p{
color: deepskyblue;
}
</style>
<style>
</style>
I believe that as long as you read this blog post, you will definitely be able to fully understand why the scoped style doesn’t work anymore. If you can, click like to let more people see. If you don’t understand, you can comment, and the blogger will reply in time. ! ! See you next time! !