vue3中插槽的详细使用笔记

一，插槽的作用

类似于你往电脑的卡槽中插内存卡啊等，简单来说，就是父组件向子组件传值的时候用的，在子组件中用 <slot ></slot>先预留出一个位置，然后父组件就可以在调用子组件的时候可以在子组件标签内部向子组件添加信息，
不是之前的数据传递，是模板数据的传递

二，样例

比如，我们现在先定义两个组件，一个父组件father，一个子组件son，父组件调用子组件

<template>
    <h1>我是父组件</h1>
    <son></son>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import son from './son.vue'

export default defineComponent({
    components: {
        son
    },
    setup() {

    },
})
</script>

<template>
    <h1>我是子组件</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Son',
    setup() {

    },
})
</script>

现在 father.vue 中的 子组件占位符 上写内容，在页面上是显示不了的，会被 son.vue 的内容覆盖掉；

<template>
    <h1>我是父组件</h1>
    <son>我是要向子组件传递的内容</son>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import son from './son.vue'

export default defineComponent({
    components: {
        son
    },
    setup() {

    },
})
</script>

使用组件的插槽功能，可以将 父组件 的元素 填到 子组件 中使用 slot 标签来占位的地方；

<template>
    <h1>我是父组件</h1>
    <son>我是要向子组件传递的内容</son>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import son from './son.vue'

export default defineComponent({
    components: {
        son
    },
    setup() {

    },
})
</script>

<template>
    <h1>我是子组件</h1>
    <slot></slot>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Son',
    setup() {

    },
})
</script>

到现在插槽的作用应该明白了吧

三，具名插槽

有时我们需要多个插槽，为了 区分多个插槽，我们可以给 插槽 起名字，这叫做 “具名插槽” 。
看代码
子组件：有三个插槽，并且每个插槽都有自己的名字，这就是具名插槽，父组件可以根据插槽的名字选择要将元素插在哪里

<template>
  <div class="list-content">
    <slot name="a"></slot>
    <slot name="b"></slot>
    <slot name="c"></slot>
  </div>
</template>

父组件：

<template>
  <div>
     <子组件>
         <template v-slot:a> a </template>
         <template v-slot:b> b </template>
         <template v-slot:c> c </template>
     </子组件>
  </div>
</template>

注意：

要是 slot 标签没有指定 name 属性，那他的 name 默认为：default

子：
<template>
  <div class="list-content">
    <slot name="a"></slot>
    <slot></slot>
  </div>
</template>
======================================================================
父：
<template>
  <div>
      <子组件>
         <template v-slot:a> a </template>
         <template v-slot:default> b </template>
      </子组件>
  </div>
</template>

我们再来看一个例子：
父组件

<template>
    <h1>我是父组件</h1>
    <son>
        <template v-slot:header>
            <div class="header">我是头部</div>
        </template>
        <template v-slot:center>
            <div class="center">我是内容呢</div>
        </template>
        <template v-slot:tail>
            <div class="tail">尾部</div>
        </template>
    </son>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import son from './son.vue'

export default defineComponent({
    components: {
        son
    },
    setup() {

    },
})
</script>

子组件

<template>
    <h1>我是子组件</h1>
    <slot name="header"></slot>
    <slot name="center"></slot>
    <slot name="tail"></slot>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Son',
    setup() {

    },
})
</script>

显示的界面

利用具名插槽，我们可以灵活的变换位置，现在，我们将子组件中的插槽位置变换

<template>
    <h1>我是子组件</h1>
    <slot name="center"></slot>

    <slot name="header"></slot>
    <slot name="tail"></slot>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Son',
    setup() {

    },
})
</script>

现在显示的界面