slot插槽（有默认值，也有名称）一般情况下通过名称进行匹配
什么是插槽，有什么用？插槽相当于插入的一个东西，可以用来灵活的封装组件，比如说封装一个模态框
对组件进行内容的定制，slot插槽，一对组件标签中的结构，最终会被插入到组件的模板中去的
使用方法思路：子组件定义完成。需要灵活的改变子组件里面的东西。可以在子组件注册的标签里面写<slot></slot>来完成内容替换，当然有name来进行标识是最好的
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <modal> <h1 slot="title">{{title}}</h1> <div slot="content"> <p>1</p> <p>2</p> <div>我是插件的内容部分</div> </div> </modal> </div> </body> <script src="vue.js"></script> <script> /* 对组件进行内容的定制 slot插槽 一对组件标签中的结构，最终会被插入到组件的模板中 */ Vue.component(‘modal‘,{ data(){ return { title:"modal的标题" } }, template:` <div class="box"> <div class="title"> <slot name="title"></slot> </div> <div class="content"> <slot name="content"></slot> </div> <div class="footer"> 我是一个底部 </div> </div> ` }) new Vue({ el:"#app", data(){ return { title:‘父组件title插槽‘ } } }) </script> <style> .box{ font-size:14px; width: 400px; height: 260px; border:2px solid #F60; margin:0px auto; } .title{ border-bottom:1px solid #999; } .content{ border-bottom:1px solid #999; } </style> </html>