Vue 插槽（slot）用法

莫道一龙

已于 2023-07-24 08:17:18 修改

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-07-21 20:01:57 首次发布

本文链接：https://blog.csdn.net/m0_57284405/article/details/131855940

版权

Vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、什么是插槽？

插槽：是Vue 中的一种组件间的内容分发方式。它允许你在一个组件中定义可替换的内容，并在使用该组件时提供不同的内容。插槽使得组件的结构更加灵活，可以根据需要动态地传递内容。

使用插槽，你可以在一个组件中定义一个或多个插槽，并在组件的模板中使用 <slot> 元素来表示这些插槽。然后，在使用该组件时，你可以在组件标签之间插入自定义的内容，这些内容将替换掉对应的插槽。

通过使用插槽，你可以创建更加灵活和可重用的组件，使得组件的结构和内容可以根据不同的需求进行定制化。

简单的说：插槽用于决定将所携带的内容，插入到指定的某个位置，如果组件内容部分不希望写死，希望能使用时自定义，可以通过插槽来实现。

插槽的分类：

默认插槽 组件内定制一处结构
具名插槽 组件内定制多出结构
注意：作用域插槽确切说是插槽的一种传参语法，不属于插槽分类

二、默认插槽

默认插槽（Default Slot）：默认插槽是最基本的插槽类型。当你在组件的模板中使用元素时，没有为其指定名称，那么它就是默认插槽。默认插槽可以接收传递给组件的任意内容，并将其替换到对应位置。

语法示例

子组件中定义一个默认插槽

Children.vue

<template>
  <div class="about">
    <h1>↓一个默认插槽↓</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
  </div>
</template>

在使用时，可以在组件标签之间插入内容，这些内容将替换掉所在位置的内容。

App.vue

<template>
  <div class="about">
    <h1>↓这是要传过去的不分↓</h1>
    <children>
      <!-- 一个p标签的dom结构 -->
      <p>子组件标签</p>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
    }
  }
}
</script>

效果：
在这里插入图片描述

在子组件中，可以定义多个默认插槽，并在子组件中决定这些默认插槽的位置，父组件要插入的内容，都会被填充到这些默认的插槽中：

Children.vue

<template>
  <div class="aboutChild">
    <h1>↓一个默认插槽↓</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
    <slot></slot>
  </div>
</template>

效果：
在这里插入图片描述
当然，父组件定义要插入到子组件插槽的内容，并不一定是dom结构类型，也可以是一个组件，也可以是普通的数据结构，只要子组件有定义插槽，就会把内容填充进去。

App.vue

<template>
  <div class="about">
    <h1>↓这是要传过去的部分↓</h1>
    <children>
      <!-- 一个p标签的dom结构 -->
      <p>子组件标签</p>
    </children>
    <children>
      <!-- 一个p标签的dom结构 -->
      <p>子组件标签</p>
    </children>
  </div>
</template>

Children.vue

<template>
  <div class="aboutChild">
    <h1>↓一个默认插槽↓</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
  </div>
</template>

效果：
在这里插入图片描述

三、具名插槽

具名插槽就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。

语法示例
子类中使用 <slot name="名称"></slot>

Children.vue

template>
  <div class="about">
    <h1>↓一个具名插槽↓</h1>
    <!-- 给插槽加了个name属性，就是所谓的具名插槽了 -->
    <slot name="one"></slot>
    <slot name="two"></slot>
  </div>
</template>

父类中使用<template></template>

<template>
  <div class="about">
    <h1>↓这是要传过去的部分↓</h1>
    <children>
      <template v-slot:one>
        <p>one插槽</p>
      </template>
      <template v-slot:two>
        two插槽
      </template>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
    }
  }
}
</script>

在这里插入图片描述

子组件也可以定义多个同名的具名插槽：

<template>
  <div class="aboutChild">
    <h1>↓一个具名插槽↓</h1>
    <!-- 给插槽加了个name属性，就是所谓的具名插槽了 -->
    <slot name="one"></slot>
    <slot name="two"></slot>
    <slot name="two"></slot>
  </div>
</template>

在这里插入图片描述
为了方便书写，vue给我们提供了一个简单写法
将v-slot 简写为 #

四、作用域插槽

定义slot 插槽的同时, 是可以传值的。给插槽上可以 绑定数据，将来 使用组件时可以用

语法步骤

给 slot 标签, 以添加属性的方式传值

<slot :id="item.id" msg="测试文本"></slot>

所有添加的属性, 都会被收集到一个对象中
```
{ id: 3, msg: '测试文本' }
```

在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

<MyTable :list="list">
  <template #default="obj">
    <button @click="del(obj.id)">删除</button>
  </template>
</MyTable>

示例

子组件(Children.vue):

<template>
  <div class="about">
    <h1>子组件</h1>
    <!-- 子组件中，告诉父组件我要实现obj里面的信息 -->
    <slot :obj="obj"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj: {
        name: 'children'
      }
    }
  }
}
</script>

父组件：
这种时候有一种情况需要注意：

如果子组件中只有一个作用域插槽且为默认插槽时，父组件可以使用下边这种简单的写法，当然规范点还是加在template模板标签好点：

<template>
  <div class="about">
    <h1>父组件</h1>
    <children v-slot="slotProps">
        <p>one插槽{{slotProps.obj.name}}</p>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
    }
  }
}
</script>

在这里插入图片描述

但是当子组件中有多个作用域插槽时，不建议上边这种简单的写法，因为可能会出现作用域不明确的问题。

子组件有多个作用域插槽时：

<template>
  <div class="about">
    <h1>子组件</h1>
    <!-- 子组件中，告诉父组件我要实现obj里面的信息 -->
    <slot :obj1="obj1" name='one'></slot>
    <slot :obj2="obj2" name='two'></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj1: {
        name: 'children-1'
      },
      obj2: {
        name: 'children-2'
      }
    }
  }
}
</script>

父组件使用这种规范的写法，可以避免有时作用域不明确问题：

<template>
  <div class="about">
    <h1>父组件</h1>
    <children>
        <template v-slot:one="slotProps">
          <h2>{{slotProps.obj1.name}}</h2>
        </template>
        <template v-slot:two="twoSlotProps">
          <h2>{{twoSlotProps.obj2.name}}</h2>
        </template>
    </children>
  </div>
</template>

在这里插入图片描述

五、动态插槽

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名

示例
子组件：

<template>
  <div class="about">
    <h1>子组件</h1>
    <slot :obj="obj1" name="one"></slot>
    <slot :obj="obj2" name="two"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj1: {
        name: 'Children-1'
      },
      obj2: {
        name: 'Children-2'
      }
    }
  }
}
</script>

父组件：

<template>
  <div class="about">
    <h1>父组件</h1>
    <children>
        <template v-slot:[dynamicSlotName]="slotProps">
          <h2>{{slotProps.obj.name}}</h2>
        </template>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
      dynamicSlotName: 'one'
    }
  }
}
</script>