Vue中插槽slot - 码农知识堂 - 文章详情页

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

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

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

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

当你把插在你的子组件template里，这时候你就可以在调用你子组件的时候，可以在子组件里插标签，显示你想显示的dom结构。
```
     <div>11111div>
     <div>22222div>
     <div>33333div>
```
```
Vue.component("child",{
            template:`
            
                child
                
            
```
`
})

结果：

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

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

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


      child
      
      <slot>slot>

结果：

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

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

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

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

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


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

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

结果如下图：

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

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

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


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


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

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

新插槽slot的写法：

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

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


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

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


    <template #a>
         <div>1111div>
    template>

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

注意：

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

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

相关阅读:
合成数据: 利用开源技术节约资金、时间和减少碳排放
基于java+SpringBoot+HTML+Mysql)疫情防控微信小程序
kali linux实现arp攻击对方主机
axios介绍以及对axios进行二次封装
论文分享 | 利用单模态自监督学习实现多模态AVSR
Postman 如何获取请求结果并设置到请求头中
企业电子招标采购系统源码Spring Boot + Mybatis + Redis + Layui + 前后端分离构建企业电子招采平台之立项流程图
腾讯云HAI域AI作画
【知识点随笔分析 | 第六篇】HTTP/1.1，HTTP/2和HTTP/3的区别
通过docker进行部署 Zookeeper、Kafka集群

原文地址：https://blog.csdn.net/a1598452168YY/article/details/128033236