Vue--插槽 vs 高复用组件

为什么要用插槽！

组件的最大特性就是提高复用性，而插槽的作用是最大程度的优化组件的可复用能力。

组件的复用常见场景如多个页面有同样的UI结构，通过组件间通讯机制传递数据，以此达到同一套代码渲染不同数据的效果。

然而，这种利用组件间通讯机制只能满足UI结构相同，展示数据不同的场景。设想一下：有两个相似的页面，它们大部分的结构相同，只有某个区域不同，以上办法就不适合了，也许你会说，在子组件中利用v-if、v-else等判断来处理不就可以了。但是如果我们有10个这样的页面呢？100个呢？我们不可能在子组件中写100个判断，那样的话子组件会显得非常庞大、冗余。也就失去了组件的简小精悍、易维护的特点了。

而插槽能很好的解决以上问题，我们只需把不同的部分预留一个插槽就可以了，具体的插槽内容放在调用者中定义。这样，子组件拥有高复用性的能力的同时，简小易维护的能力也得到保留！

总体来说：插槽是组件最大化利用的一种手段，而不是替代组件的策略，当然也不能替代组件。

最简单的一个插槽

在了解了组件基础的前提下，我们定义一个最简单的插槽self-slot 它的模板如下。

<div>
    <h1>this is a simple slot</h1>
    <slot></slot>  // 预留的‘插口’
</div>

使用也非常简单，跟调用子组件一样

<self-slot>
    hello world
&