Vue插槽slot全部使用方法示例解析

Vue.js 是一个渐进式的 JavaScript 框架，它采用了组件化的思想。而组件化的另一个关键特性就是插槽（Slot），它可以让我们更加灵活地组织组件、共享代码，并且更好地实现可复用性。

什么是插槽（Slot）？

插槽是一种可以在组件的模板中预留出来的“占位符”，它可以允许我们在使用该组件的时候，把某些内容置入插槽中替代占位符，从而给组件注入更加具体的内容。

使用插槽（Slot）的方式

使用插槽有两种方式：

具名插槽

具名插槽让节点精准切入到指定的占位符位置，允许我们在模板中指定一个具体的插入位置和具体的内容。使用方式如下：

<div id="app">
  <parent-component>
    <template v-slot:default>
      <!-- 子组件默认插槽的内容 -->
      <p>这里是插入到父组件默认插槽位置中的内容</p>
    </template>

    <template v-slot:custom>
      <!-- 子组件自定义插槽的内容 -->
      <p>这里是插入到父组件自定义插槽位置中的内容</p>
    </template>
  </parent-component>
</div>

//父组件（ParentComponent.vue）
<template>
  <div>
    <slot></slot> 
    <!-- 会被默认插槽和具名插槽中的内容依次替换 -->

    <slot name="custom"></slot>
    <!-- 只会被具名插槽中的内容替换 -->
  </div>
</template>

作用域插槽

作用域插槽允许我们在插槽上绑定数据，同时子组件可以从父组件中获取到插槽内部的数据。使用方式如下：

<div id="app">
  <parent-component>
    <template v-slot:default="slotProps">
      <child-component :slot-data="slotProps" />
    </template>
  </parent-component>
</div>

// 子组件（ChildComponent.vue）
<template>
  <div>
    <p>这里是子组件的内容，而且我知道父组件的插槽数据：{{ slotData }}</p>
  </div>
</template>

<script>
export default {
  props: ['slotData']
}
</script>

// 父组件（ParentComponent.vue）
<template>
  <div>
    <slot :slot-data="message"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello, I am parent component'
    }
  }
}
</script>

以上就是插槽的使用方式，其中具名插槽、作用域插槽是插槽中常用的方式，也是开发中比较实用的技巧。