How to modify the internal label style of subcomponents in scoped mode in Vue.js

This article will share with you how to modify the internal label style of subcomponents in scoped mode in Vue.js. The content is quite good. I hope it can help friends in need.

In Vue.js In projects, we usually add the scoped attribute to the tag to generate a unique attribute for our component, as follows The following code:

my-comp.vue

my comp

export default { } Copy after login The generated html is as follows, you can see p and all sub-tags have a data-v-0a679ea0 identification attribute. This attribute is when we add scoped to As a result, if you do not add scoped , this identification attribute will not be generated.

One advantage this identification attribute brings to us is that the styles within the component will not affect the labels of other components. Just imagine, if I am in the my-comp component The following style is written:

span { color: red; } Copy after login This style is a very common style. If there are span tags in other components, it will be applied to this tag, adding After scoped , the final generated style is like this:

span { color: red; } //生成后如下 span[data-v-0a679ea0] { color: red; } Copy after login span[data-v-0a679ea0] This style will only be applied to the span of its own component because of the identification attribute Is unique to the component.

If we put component A inside component B, let’s see how this identification attribute is generated.

home.vue

import MyCompo from './my-comp' export default { components: {MyCompo} } Copy after login The generated html code is as follows:

data-v-957c7522 is the identification attribute of the home component. This attribute is also added to the root of the my-comp component. , but note that the span tag of my-comp does not add the data-v-957c7522 identification attribute, because this span is the label inside the my-comp component, and is not written in the home component.

But sometimes there will be situations where you need to write styles in the home component to modify the tags in my-comp.

Look at the following code:

This code belongs to the home component ’s

.my-comp span { color: blue; } Copy after login But this code will not change the color of my comp , because this style will eventually look like It goes like this:

#my-comp# The span tag does not have the data-v-957c9522 identification attribute.

how to solve this problem?

We can solve the problem by removing the scoped of the home component, but this is not recommended. As mentioned above, styles without scoped can easily affect other components. This error is very difficult to troubleshoot. If you use a style language like less, then there is a very good solution. Look at the following code:

@deep: ~'>>>'; .my-comp @{deep} span { color: blue; } Copy after login Let’s see what the final generated style looks like.

The identification attribute has been moved from span to .my-comp , so that this style can be well applied to the inside of the my-comp component span tag and will not affect other components.