[Interview] Interviewer: Talk about the principle of scoped

Each vue component is independent of each other.

In each component, you can layout, if you don't add scoped in the style, it will affect all components.

If you want to write styles that only take effect within this component, you need to add scoped.

Function: Let the style take effect in this component without affecting other components.

Principle: Add custom attributes to nodes, and then css adds styles according to attribute selectors.


1. When the parent component has no scoped attribute and the child component has scoped, all tags of the child component will be set with the data-v-hash attribute of the child component.

2. When the parent component has a scoped attribute, the child component has no scope. All tags of the parent component and the outermost tag of the child component have the data-v-hash attribute of the parent component.

3. Both parent and child components are scoped. All tags of the parent component have the data-v-hash attribute of the parent component, and all tags of the child component have the data-v-hash attribute of the child component. At this time, the outermost label of the child component is The data-v-hash attribute of the parent component and the child component will be set at the same time
 

Guess you like

Origin blog.csdn.net/qq_46580087/article/details/124689982