The implementation principle of scoped in Vue and the usage of scoped penetration (with code)

The content this article brings to you is about the implementation principle of scoped in Vue and the usage of scoped penetration (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

1. What is scoped

There is a special attribute on the style tag in the Vue file, scoped. When a style tag has a scoped attribute, its CSS style can only be used for the current Vue component, so that the styles of components do not pollute each other. If all style tags in a project are added with the scoped attribute, it is equivalent to realizing style modularization.

2. The implementation principle of scoped

The effect of the scoped attribute in Vue is mainly achieved through PostCss. The following is the code before translation:

<style scoped>
    .example{
        color:red;
    }
</style>
<template>
    <div>scoped测试案例</div>
</template>

After translation:

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

That is: PostCSS adds a unique dynamic attribute to all DOM in a component, and adds an additional corresponding to the css selector The attribute selector is used to select the DOM in the component. This approach makes the style only apply to the DOM element containing the attribute (the DOM inside the component).

Summary: scoped rendering rules:

1. Add a unique data attribute (for example: data-v-5558831a) to the HTML dom node to uniquely identify this DOM element

2. Add a data attribute selector of the current component (for example: [data-v-5558831a]) at the end of each css selector (the css statement generated after compilation) To privatize styles

3.scoped penetration

scoped seems to be very useful. At that time in the Vue project, when we introduced a third-party component library (such as Using vue-awesome-swiper to implement mobile carousel), you need to modify the style of the third-party component library in the local component, but do not want to remove the scoped attribute and cause style coverage between components. At this time we can penetrate scoped in a special way.

stylus style penetration uses>>>

    外层 >>> 第三方组件 
        样式
        
   .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

sass and less style penetration use/deep/

    外层 /deep/ 第三方组件 {
        样式
    }
    .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
    }

3. Modify the first one in the component Other methods of third-party component library styles

We have introduced above the method of modifying the imported third-party component library style through scopd penetration when using the scoped attribute. Below we introduce other methods to modify the imported third-party components. Library style

Do not use the scoped attribute in the vue component. Use two style tags in the vue component, one with the scoped attribute and one without the scoped attribute. Write the css style that needs to be overridden without adding scoped. Create a reset.css (basic global style) file in the style tag of the attribute, write the overridden css style in it, and introduce

in the entry file main.js Recommended related articles:

Introduction to two ways of implementing component switching in Vue (with code)

How the node server implements the acquisition of Douban data (code)

The above is the detailed content of The implementation principle of scoped in Vue and the usage of scoped penetration (with code). For more information, please follow other related articles on the PHP Chinese website!