1.插槽的基本使用
子：
<template> <div>
<span>插槽的基本使用</span>
<slot></slot>
</div>
<template>
父：
<cpn><button>按钮</button></cpn>
2.插槽有默认值（有多个值同事放入，整体替换）
子：
<template>
<div>
<span>插槽的基本使用</span>
<slot><button>按钮</button></slot>
</div>
<template>
父：
<cpn></cpn>
<cpn><span>文字</span></cpn>
<cpn>
<span style="display:block">文字</span>
<p>这是一段文字</p>
<button>这是一个按钮</button>
</cpn>
3.具名插槽
子：
<template>
<div>
<slot name="left">左边</span>
<slot name="center">中间</slot>
<slot name="right">右边</slot>
</div>
<template>
父：
<cpn>
<span slot="center" style="display:block" >中间替换</span>
<div slot="right">
<span style="display:block">右侧替换</span>
<p>这是一段文字</p>
<button>这是一个按钮</button>
</div>
</cpn>
原文：https://www.cnblogs.com/magic-world/p/15019956.html