In vue components, how to solve the problem of style conflicts between components

By default, styles written in .vue components will take effect globally, so it is easy to cause style conflicts between multiple components.

The root causes of style conflicts between components are:

① In a single-page application, the DOM structure of all components is presented based on the unique index.html page

② The styles in each component will affect the DOM elements in the entire index.html page

Style conflict resolution:

principle:

 use:

 

When not added, more precisely, it is not its own son in the parent component, and the property is not automatically added

 

 Instance object of V ue component

 

Guess you like

Origin blog.csdn.net/qq_57423665/article/details/130313333