vue如何使用上下文感知组件创造魔法

vue如何使用上下文感知组件创造魔法

这篇文章主要介绍了vue如何使用上下文感知组件创造魔法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

用上下文感知组件创造魔法

上下文感知组件是“神奇的”——它们可以自动适应周围发生的事情，处理边缘情况，状态共享等等。有 3 种主要类型的上下文感知组件，但是我觉得配置是其中最有趣的一种。

1 状态共享

当你将一个大组件分解成多个小组件时，它们通常仍然需要共享状态。你可以“在幕后”实现这一点，而不是将这项工作推给使用组件的人。

可以将一个Dropdown组件分解为Select和Option组件以提供更大的灵活性。但是为了更容易使用，Select和Option组件彼此共享selected状态：

<!--为简单起见用作单个组件--><Dropdownv-model="selected":options="[]"/><!--拆分以获得更大的灵活性--><Selectv-model="selected"><Optionvalue="mustard">Mustard</Option><Optionvalue="ketchup">Ketchup</Option><divclass="relish-wrapper"><Optionvalue="relish">Relish</Option></div></Select>

2 配置

有时需要根据应用程序其余部分的情况更改组件的行为。这样做通常是为了自动处理边缘情况，否则会很麻烦。Popup或者Tooltip应该重新定位自己，这样它就不会溢出页面。但是，如果该组件位于 modal 内部，则它应该重新定位自身，以免溢出modal。如果Tooltip知道它何时在模态内，这可以自动完成。

3 造型

当你创建了上下文感知CSS，根据父元素或兄弟元素中发生的情况应用不同的样式。

.statistic{color:black;font-size:24px;font-weight:bold;}/*在彼此相邻的统计数据之间进行一些分离*/.statistic+.statistic{margin-left:10px;}

CSS 中变量让我们更进一步允许我们在页面的不同部分设置不同的值。

感谢你能够认真阅读完这篇文章，希望小编分享的“vue如何使用上下文感知组件创造魔法”这篇文章对大家有帮助，同时也希望大家多多支持恰卡编程网，关注恰卡编程网行业资讯频道，更多相关知识等着你来学习!