Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of style features in vue3 single-file components. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Style scoped

The following are the things to be noted:

The style does not affect other components and only takes effect on the current component.

The root element of a child component is affected by both the scope style of the parent component and the scope style of the child component. The goal is to allow the parent component to adjust the layout of the child component.

There are three special selectors:

1. Depth selector: can affect subcomponents. Use pseudo class = >: deep (cls: the selector of influence)

.a: deep (.b) {.}

two。 Slot selector: the style that can affect the contents of the slot. Use pseudo class = >: slotted (selector)

: slloted (.a) {.}

3. Global selector: it is the style that affects the global. Use pseudo class = >: global (selector)

: slloted (.a) {.}

Scoped style can co-exist with style

Style module

There is a module in the style tag. Its style, like style scoped, can only be scoped to the current component.

This method compiles css to css modules. And expose the component $styles object to use the css style

This should be red

.red {color: red;}

You can assign a value to module to customize the exposed object name

This should be red

.red {color: red;}

In combinatorial api, you can use useCssModule () api to use cssModule.

/ / default, return the class useCssModule () / / name in, and return the state-driven dynamic css of the class useCssModule ('classes') in

You can use v-bind () to associate css values to dynamic component states

Helloexport default {data () {return {color: 'red'}. Text {color: v-bind (color);} this article ends here. I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.