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

作用：

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

---

旧slot的写法：

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

插槽技术就可以满足你的需求：<slot></slot>

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

<child>
     <div>11111</div>
     <div>22222</div>
     <div>33333</div>
</child>

Vue.component("child",{
            template:`
            <div>
                child
                <slot></slot>
            </div>
            `
        })

结果：

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

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

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

<div>
      child
      <slot></slot>
      <slot></slot>
</div>

结果：

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

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

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

具名插槽：就是具有名字的插槽， <slot name="aa”><slot>；

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

<div>
    child
    <slot name="aa"></slot>
    <slot name="bb"></slot>
</div>

<child>
    <div slot="aa">11111</div>
    <div slot="bb">22222</div>
    <div>33333</div>
</child>

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

结果如下图：

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

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

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

<child>
     <button slot="left">left</button>
     <i class="icofont icon-all" slot="right">图标</i>
</child>

<div>
     <slot name="left"></slot>
     <span>文字</span>
     <slot name="right"></slot>
</div>

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

---

新插槽slot的写法：

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

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

<child>
    <template v-slot="a">
          <div>1111</div>
    </template>
</child>

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

<child>
    <template #a>
         <div>1111</div>
    </template>
</child>

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

注意：

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

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