slot插槽（别名：内容分发）：

作用：

• 混合父组件的内容与子组件自己的模板；
• 父组件模板内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译；
• 扩展组件能力，提高组件的复用性；

旧slot的写法：

需求：别人应用你的组件，比如导航栏，想自定义dom结构，因为不同的页面有些dom结构会有细微的差别；

插槽技术就可以满足你的需求：

当你把插在你的子组件template里，这时候你就可以在调用你子组件的时候，可以在子组件里插标签，显示你想显示的dom结构。

11111
22222
33333

Vue.component("child",{template:`
child
`})

结果：

当你在子组件 child template插入插槽，含义是你可以在调用子组件里插入标签，这些标签会都插在child组件里的位置；

当你只插了一个插槽slot，子组件里的标签都会被插进来；

当你插入两个插槽，子组件里的标签也会被插入两次：

child

结果：

那怎么实现标签插入指定位置呢：

插槽分为：单个插槽、具名插槽；

单个插槽：就像上面那样子的；

具名插槽：就是具有名字的插槽， ；

• 具名插槽有个属性：name，可以使得标签插入到某个插槽的具体位置：

child

11111
22222
33333

• 标签想插在那个位置，就使用带有该名字的插槽slot；
• 像第三个div标签，没有使用带有名字的slot，而且子组件中也没有不带名字插槽，所以它就插不到里面去；
• 根据插槽名字对号入座；

结果如下图：

所以根据插槽的原理，我们看下面一个小例子：

需求：导航栏，一个调用了我们的子组件child，组件dom结构是这样的，左边显示一个按钮，中间显示文字，右边显示图标。想一想如果我们把dom给规定死的话，别人要小改的话怎么办，这就大大降低了组件的复用性，我们定义组件就是为了提高代码的复用性。

所以我们可以用插槽，把位置空出来让调用组件的人自己定义dom：

left图标

文字

• 左边和右边的标签给好插槽，让用的人自己定义； 

新插槽slot的写法：

新版的插槽只在插入标签的位置上改了新写法；

旧的是直接插入标签，新版的是把slot改成了指令的写法v-slot=“”：

 v-slot指令名还可以省略：

含义都是在 名为“a”的插槽处插入； 

注意：

• 新旧插槽都是适用于vue2版本的，并不是vue3的；
• 当子组件插标签，是显示不出来的，都没这种用法，但是如果想显示子组件里的内容，需要用；

插槽的意义：扩展组件能力，提高组件的复用性；