「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

slot是什么

slot 相当于一个占位符；当我们想要将模板中的内容(template 中的内容，不是数据值，数据值应该使用props)片段传递给子组件时，并让子组件在其自己的模板中展示某些片段的内容。

• 当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置）。
• 当插槽有命名时，组件标签中使用属性slot="mySlot"的元素就会替换该对应位置内容；

slot content 内容 和 outlet 出口

//TestSlot.vue  文件
<template>
<div>
  <slot-index>slotIndex 按钮</slot-index>

  <slot-index>slotIndex 按钮22222</slot-index>
</div>
</template>

<script>
    import SlotIndex from "./SlotIndex";
    export default {
        name: "TestSlot",
      components: {SlotIndex}
    }
</script>

// SlotIndex.vue 文件
<template>
    <div>
      <el-button type="primary">
        <slot></slot>
      </el-button>
    </div>
</template>

<script>
    export default {
        name: "SlotIndex"
    }
</script>

效果图:

理解图:

在父模版中是使用带有slot的子模版，它会自动将父模板中的内容去匹配子模版的slot的内容。slot 的内容有权访问父组件的数据范围（因为是在父组件中定义的），但是它无权访问子组件中的数据；

父模板中的所有内容都在父范围内编译;子模板中的所有内容都在子作用域中编译。

slot 的分类

插槽主要有：匿名插槽、具名（命名）插槽、动态插槽、作用域插槽；

匿名插槽

如上面所举的例子，没有在标签中起名name 的插槽，称为匿名插槽，当你的模板中只有一个插槽或者在多个模板中只有一个未命名的插槽，在进行模板替换内容时，模板会自动找到默认插槽（未命名的插槽进行匹配，相对应的未命名的slot开始匹配。）

具名（命名）插槽

当在单个组件中具有多个插槽时，可以为同步的插槽分配一个唯一的ID，以便可以确定应呈现的唯一确定的内容位置，在使用的父组件中，我们需要一种方法来传递多个插槽内容的片段，每个片段面向不同的插槽出口。例如：

// SlotIndex.vue
<template>
    <div>
      <el-button type="primary">

        <slot name="header"></slot>
        <slot></slot>
        <slot name="footer"></slot>
      </el-button>
    </div>
</template>

// TestSlot.vue
<template>
<div >
  <slot-index style="padding-top: 20px">
    <template v-slot="header">
      <h1>这是header--Slot的内容</h1>
    </template>
  </slot-index>
  <slot-index style="padding-top: 20px">slotIndex 按钮</slot-index>
 <!-- <slot-index>slotIndex 按钮22222</slot-index>-->

  <slot-index style="padding-top: 20px">
    <template v-slot="footer">
      <span>这是footer--Slot的内容</span>
    </template>
  </slot-index>
</div>
</template>

效果图: 当没有命名的插槽，被称为默认插槽（name="default"/#default）,当组件接受默认插槽和命名时，所有顶级非节点(未命名的插槽节点)都将隐式的看成默认插槽的内容。

// TestSlot.vue
<template>
<div >
  <slot-index style="padding-top: 20px">
    <template v-slot="header">
      <h1>这是header--Slot的内容</h1>
    </template>
  </slot-index>
  <!--下面的内容可以替换为:-->
  <!--<slot-index style="padding-top: 20px">slotIndex 按钮</slot-index>-->
 <el-button type="primary">
 slotIndex 按钮
   </el-button>

  <slot-index style="padding-top: 20px">
    <template v-slot="footer">
      <span>这是footer--Slot的内容</span>
    </template>
  </slot-index>
</div>
</template>

作用域插槽

插槽的内容可以访问父组件中的数据，但是她无权访问子组件中的数据，如果我们想在插槽中同时访问子组件和父组件中的数据，就得使用作用域插槽。

匿名的作用域插槽

// SlotIndex.vue
<template>
    <div>
      <span>
        <slot :text="message" :count="520"></slot>
      </span>
    </div>
</template>

<script>
    export default {
        name: "SlotIndex",
      data(){
          return{
            message:"Hello",
          }
      }
    }
</script>

//TestSlot.vue
<template>
<div >
  <slot-index v-slot="slotProps">
    {{slotProps.text}}-----{{slotProps.count}}
  </slot-index>
</div>
</template>

<script>
    import SlotIndex from "./SlotIndex";
    export default {
        name: "TestSlot",
      components: {SlotIndex}
    }
</script>

效果图:

理解： 在子组件中的slot中绑定的数据传递到插槽的props可用作相应的指令值，可以通过插槽内的表达式访问该指令。

TestSlot({
    default：(slotProps) =>{
    
        return `${slotProps.text} ${slotProps.count}`
    }
})

命名的作用域插槽

// SlotIndex.vue
<template>
    <div>
      <span>
        <slot :text="message" :count="520"></slot>
      </span>
      <h1>
        <slot name="test" :text="messageTest" :count="250"></slot>
      </h1>
    </div>
</template>

<script>
    export default {
        name: "SlotIndex",
      data(){
          return{
            message:"Hello",
            messageTest:"world"
          }
      }
    }
</script>

//TestSlot.vue
<template>
<div >
  <slot-index v-slot="slotProps">
    {{slotProps.text}}-----{{slotProps.count}}
  </slot-index>
  
// 这里的v-slot:test --->v-slot:name中的name 是插槽名。
<slot-index v-slot:test="slotProps">
  {{slotProps.text}}-----{{slotProps.count}}
</slot-index>

</div>
</template>

<script>
    import SlotIndex from "./SlotIndex";
    export default {
        name: "TestSlot",
      components: {SlotIndex}
    }
</script>

效果图:

---

最后

我正在成长，如果有什么问题欢迎大家留言，我们一起讨论。。。

如果对您有用，希望您留下评论/👍/收藏。

您的三连，是对我创作的最大的鼓励🙇‍♀️🙇‍♀️🙇‍