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

This article mainly introduces how vue uses context-aware components to create magic. It has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

Creating magic with context-aware components

Context-aware components are "magical"-they can automatically adapt to what's happening around them, handle edge cases, state sharing, and so on. There are three main types of context-aware components, but I think configuration is the most interesting one.

1 State sharing

When you break down a large component into multiple small components, they usually still need to share state. You can do this "behind the scenes," rather than pushing the work to the people who use the component.

A Dropdown component can be broken down into Select and Option components to provide greater flexibility. But for ease of use, the Select and Option components share the selected state with each other:

Mustard Ketchup Relish 2 Configuration

Sometimes you need to change the behavior of a component based on the rest of your application. This is usually done to automatically handle edge situations that would otherwise be troublesome. Popup or Tooltip should reposition itself so that it doesn't overflow the page. However, if the component is inside a modal, it should reposition itself so as not to overflow the modal. This can be done automatically if Tooltip knows when it is within the modality.

3 modeling

When you create context-aware CSS, apply different styles depending on what happens in the parent or sibling element.

.statistic { color: black; font-size: 24px; font-weight: bold;}/* Make some separation between statistics adjacent to each other */.statistic + .statistic { margin-left: 10px;}

CSS variables take us one step further and allow us to set different values in different parts of the page.

Thank you for reading this article carefully. I hope that the article "how vue uses context-aware components to create magic" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support it a lot. Pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

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.