Vue.js slots: 为什么你需要它们？

也许你已经看过了Vue.js slots的文档。我对这个功能从“为什么你可能需要它”到“没有它我怎么可能工作”的态度转变非常快。
虽然文档已经解释了它的概念，但是这里有一个关于slots怎么改进应用程序代码库的真实例子。
在我看来，slots是vue最有用和最有趣的特性之一。虽然这是web组件所推荐的标准，但是我不知道有其他框架已经实现了这一特性。解释slots的作用很简单，但是很难解释它为什么有用（如果不使用“可组合性”这个术语），所以我要给你一个使用例子。

假设你的app有很多表单，表单包含几个部分：

• 表单头部：包含关于表单的信息
• 表单元素：供用户输入
• 按钮

现在你想要把表单抽象为一个独立组件。你那些使用react和angular的同事告诉你，你需要使用类似React的组合vs继承或者Angular1的Transclude这样的特性，于是你找到了slots的文档。

你创建了这样一个组件：

<!-- FormHelper.vue -->
<form class="form">
  <h3>{{ title }}</h3>
  <slot></slot><!-- children will go here -->
  <button>Submit</button>
</form>

使用方法如下：

<!-- App.vue -->
<form-helper title="Password Reset">
  <input type="text" name="name" value="">
  <input type="text" name="email" value="">
</form-helper>

这样就可以正常运行了。可是，产品告诉你，一个特定的表单需要一个文本块来获得帮助信息的标题，按钮名要改为“Request”。这超出了“children”能做的范围。

<!-- FormHelper.vue -->
<form class="form">
  <h3>{{ title }}</h3>
  <div :v-if="hasHelp">{{ helpMessage }}</div>
  <slot></slot><!-- children will go here -->
  <button>{{ customButtonName }}</button>
</form>

上述代码可能会出现一些问题，如果需要更多按钮、更多交互等等这些情况，怎么办？幸好，vuejs提供了一个更简洁的解决方案：具名slots。于是，你把代码改成下面这样：

<!-- FormHelper.vue -->
<form class="form">
  <h3>{{ title }}</h3>
  <slot name="help"></slot>
  <slot name="elements"></slot><!-- children will go here -->
  <slot name="buttons"></slot>
</form>

使用方法：

<!-- App.vue -->
<form-helper title="Request Form">
  <div slot="help">
    Please ask your manager before requesting hardware.
  </div>
  <div slot="elements">
    <input type="text" name="item_name" value="">
    <input type="text" name="item_value" value="">
  </div>
  <div slot="buttons">
    <button type="button" name="button">Request</button>
  </div>
</form-helper>

在我看来，关键思想是：

将slots当作传递给子组件的属性。就像传递字符串、整数和对象，而slots是传递一个子dom树，让子组件可以在任何需要的地方使用。

使用slots的其他场景：

• 通用的模态窗
• 类似bootstrap的面板和自定义内容这样的事情

使用slots的更多优点：

• 子组件用于样式和展示，业务逻辑都保留在父元素中。
• 如果没有传递内容给slots，就不会展示东西。这让你可以很好地复用它们，并且只在你想要的slots中传递。