Vue插槽（slot）的使用

首先看看为什么要使用插槽？

 1.基本定义：

<template id="cpn">
    <div>
        <h2>我是插件</h2>
        <slot></slot>
    </div>
</template>

2.使用：

<cpn>
    <button>按钮</button>
</cpn>


<cpn>
    <i>哈哈哈</i>
</cpn>


<cpn>
    <span>呵呵呵</span>
</cpn>

3.插槽默认值

<template id="cpn">
    <div>
        <h2>我是插件</h2>
        <slot><button>按钮</button></slot>
    </div>
</template>

 不添加元素即使用默认值，插入元素则使用新插入的元素覆盖插槽