vue：匿名slot、具名slot、作用域slot（技术栈Vue3 + TS）

snowball_li

已于 2023-08-18 17:23:49 修改

阅读量4.2k

点赞数 2

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

于 2022-03-12 17:50:08 首次发布

本文链接：https://blog.csdn.net/snowball_li/article/details/123298575

版权

前端专栏收录该内容

244 篇文章 23 订阅

订阅专栏

本文详细介绍了Vue中的组件插槽，包括匿名插槽、具名插槽和作用域插槽的概念及用法。匿名插槽用于替换组件内的默认内容，具名插槽通过名称进行内容定位，而作用域插槽允许父组件访问子组件的数据并定制显示。示例代码展示了如何在实际开发中使用这些插槽。

摘要由CSDN通过智能技术生成

一、背景：

1.1、对于开发可扩展组件非常有用，特别是大型项目；

1.2、匿名slot 适用于只插入一个的时候；

1.3、具名slot 可清晰的插入多个slot，按name匹配使用；

1.4、在slot的内部可以将值通过有名slot传递出去，让外层组件接收，常用于表格展示；

通俗理解：

“占坑”，在组件模板中预定位置（一个或多个），使用该组件时，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ”mySlot ” 的元素就会替换该对应位置内容；

二、匿名插槽

子组件：

<slot></slot>

父组件：

<slot style="color:blue;">我是匿名插槽</slot>

注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；

三、具名插槽

子组件：

<slot name="slotTest2"></slot>

父组件：

<div name="slotTest2">

<span style="color:red;">我是具名插槽</span>

</div>

三、作用域插槽

理解：

作用域插槽在子组件中把“当前数据”传递给父组件，父组件接收，对接收到的数据进行符合业务逻辑、代码逻辑的处理，展示出想要的数据。

子组件：

<div v-for="(item, index) in list" :key="index">

<slot name="slotTest3" :item="item"></slot>

</div>

父组件：

<template #slotTest3="scope">

<div>{{scope}}</div>

<div>{{scope.item.name}}</div>

</template>

效果：

四、完整代码

子组件代码

<template>
  <div class="hello">
    <!-- 匿名插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="slotTest2"></slot>
    <!-- 作用域插槽 -->
    <div v-for="(item, index) in list" :key="index">
      <slot name="slotTest3" :item="item"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue, } from 'vue-class-component';
@Options({
  props: {
    msg: String,
    list: Array
  },
})
export default class HelloWorld extends Vue {
  msg!: string
  list!: any
}
</script>

<style scoped lang="scss">
</style>

父组件代码：

<template>
  <div class="home">
    <slotTest1 :msg="title" :list="list">
      <slot  style="color:blue;">我是匿名插槽</slot>
      <!-- 匿名插槽，注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）； -->
      <div name="slotTest2">
        <span style="color:red;">我是具名插槽</span>
      </div>
      <div> </div>
      <!-- 作用域插槽 -->
      <template #slotTest3="scope">
        <div>{{scope}}</div>
        <div>{{scope.item.name}}</div>
      </template>
    </slotTest1>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import slotTest1 from './components/slot-child1.vue';

@Options({
  components: {
    slotTest1,
  },
})
export default class Home extends Vue {
  public title = '插槽'
  public list = [
    {
      name: 'snow', age: '18'
    },
    {
      name: 'snow2', age: '20'
    },
    {
      name: 'snow3', age: '22'
    },
  ]
}
</script>

五、欢迎交流指正

六、参考链接：

http://lanwuyaojiu.cn/blogm/blogart-113.html

Vue中slot的使用（通俗易懂）_zhouzuoluo的博客-CSDN博客_slot

vue3作用域插槽 - 哔哩哔哩

'v-slot' directive must be owned by a custom element