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 c9ccee2e6ea535a969eb3f532ad9fe89 tag to generate a unique attribute for our component, as follows The following code:

my-comp.vue

<template>
  <p class="my-comp">
    <span>my comp</span>
  </p>
</template>

<script>
  export default {
  }
</script>

<style scoped>
</style>

The generated html is as follows, you can seep and all sub-tags have a data-v-0a679ea0 identification attribute. This attribute is when we add scoped to c9ccee2e6ea535a969eb3f532ad9fe89 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:

<style>
  span {
    color: red;
  }
</style>

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:

<style scoped>
  span { color: red; }
</style>
//生成后如下
<style>
  span[data-v-0a679ea0] {
    color: red;
  }
</style>

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

<template>
  <p class="home">
    <my-compo></my-compo>
  </p>
</template>

<script>
  import MyCompo from &#39;./my-comp&#39;
  export default {
    components: {MyCompo}
  }
</script>

<style scoped>
</style>

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

<style scoped>
  .my-comp span {
    color: blue;
  }
</style>

But this code will not change the color of 45a2772a6b6107b401db3c9b82c049c2my comp54bdf357c58b8a65c66d7c19c8e4d114, 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:

<style lang="less" scoped>
  @deep: ~&#39;>>>&#39;;
  .my-comp @{deep} span {
    color: blue;
  }
</style>

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.

The above is the detailed content of How to modify the internal label style of subcomponents in scoped mode in Vue.js. For more information, please follow other related articles on the PHP Chinese website!