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

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

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

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

1 状态共享

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

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

<!-- 为简单起见用作单个组件 -->
<Dropdown v-model="selected" :options="[]" />

<!-- 拆分以获得更大的灵活性 -->
<Select v-model="selected">
  <Option value="mustard">Mustard</Option>
  <Option value="ketchup">Ketchup</Option>
  <div class="relish-wrapper">
    <Option value="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如何使用上下文感知组件创造魔法”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!