Detailed explanation of scoped implementation principle and penetration usage steps in Vue

This time I will bring you a detailed explanation of the scoped implementation principle and penetration usage steps in Vue. What are the precautions for the scoped implementation principle and penetration usage in Vue. The following is a practical case. Let’s take a look. one time.

What is scoped?

On the style tag in the vue file, there is a special attribute: scoped. When a style tag has a scoped attribute, its CSS style can only be applied to the current component, that is, the style can only be applied to the current component element. Through this attribute, the styles between components can be prevented from contaminating each other. If all style tags in a project are scoped, it is equivalent to realizing the modularization of the style.

The implementation principle of scoped

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

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <p class="example">hi</p>
</template>

After translation:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <p class="example" data-v-5558831a>hi</p>
</template>

That is: PostCSS adds a unique dynamic attribute to all dom in a component, and then 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 containing the attribute - the internal dom of the component.

Why do we need to penetrate scoped?

scoped looks beautiful, but in many projects, there will be a situation where references a third-party component, which needs to be included in the component Partially modify the styles of third-party components without removing the scoped attribute and causing style contamination between components. At this time, scoped can only be penetrated through special methods.

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

Using >>> allows you to penetrate scoped and modify the values ​​of other components when using the scoped attribute.

A curved method to save the country

In fact, there is also a curved method to save the country, that is, after defining a style tag containing a scoped attribute In addition, define a style tag that does not contain the scoped attribute, that is, define a global style tag in a vue component, and a style tag with a scope:

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

At this time, you only need to modify the first The css of the three-party style can be written in the first style.

Personally recommended method

The above two methods, the penetration method actually violates the meaning of the scoped attribute, and the curve-saving method also It makes the code too ugly.

I personally recommend the third method, that is: because scoped looks beautiful, but it contains a lot of pitfalls, so it is not recommended not to use the scoped attribute, but to distinguish the differences by adding a unique class to the outer dom components. This method not only achieves an effect similar to scoped, but also facilitates modifying the styles of various third-party components, and the code looks relatively comfortable.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use WebPack to configure vue multi-page

##How to operate the node.js default npm installation directory

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