当前位置：首页 > article >正文

Vue学习记录之九（插槽slot）

article 2024/9/24 21:28:22

插槽: 就是子组件中供给父组件提供一个占位符，父组件可以在这个占位符填充任何模版代码，如HTML,组件等。这些内容将子组件标签取代。
如A.vue 子组件

// 占位符，可以有多个插槽
<slot></slot>

父组件app.vue

<template>
<div>
	//必须在子组件<A></A> 之间写填充代码
	//填充代码必须使用<template v-slot>...</template>
	//而且在A中可以有多个<template v-slot>...</template>来填充子类的多个插槽。
	<A>
		<template v-slot>准备往子组件中添加的内容</template>
	</A>
</div>
</template>
<script lang='ts' setup>
import A from './component/A.vue'
</script>

插槽分： 匿名插槽，具名插槽，作用域插槽，和动态插槽。

一、匿名插槽

子组件放置一个插槽这里也没有使用name属性。而且在父组件填充的位置
准备往子组件中添加的内容的v-slot后面也没有要填充具体某个插槽，这样的插槽就是匿名插槽。就上上面的例子一样。
在子组件的slot没有名称，所有叫匿名。

<slot></slot>

而父组件填充的内容中v-slot也有名称，这种就被称为具名插槽。

<template v-slot>准备往子组件中添加的内容</template>

二、具名插槽

在子组件的slot有name属性：有名称，所有叫具名

<slot name="header"></slot>

而父组件填充的内容中v-slot也有名称，才能插入对应的插槽。

<template v-slot:header>准备往子组件中添加的内容</template>

v-solot: 可以简写为 # ，上面和下面等同

<template #header>准备往子组件中添加的内容</template>

三、作用域插槽

在父组件可以拿到子组件的值，子组件在标签内的template通过属性来传递，父组件直接在slot=“{参数1，参数2}” 来接收。

1、父组件代码

<template>
    <div class="content">
      <Dialog>
      	<!--
			简写：<template #header>
		-->
        <template v-slot:header>
          <div>
            我是父类的header
          </div>
        </template>
        <!--
          v-slot="{data}"  表示要接受子类传递过来的data数据。
          v-slot="{data,index}"  可以简写为 #default = "{data,index}" 
        -->
        <template v-slot="{data,index}">
          <div>
            {{ data }}--{{ index }}
          </div>
        </template>
        <!--
			简写：<template #footer>
		-->
        <template v-slot:footer>
          <div>
            我是父类的footer
          </div>
        </template>
      </Dialog>
    </div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import Dialog from './components/Dialog/index.vue'
</script>

2、子组件代码

<template>
    <div>
        <header class="header">
            <slot name="header"></slot>
        </header>
        <main class="main">
            <div v-for="(item,index) in data">
                <!--这里data名称可以随便写，但是父类接受需要这个名称，可以传递多个参数-->
                <slot :data="item"  :index="index"></slot>
            </div>
        </main>
        <footer class="footer">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
type names = {
    name:string,
    age:number
}
const data = reactive<names[]>([
    {
    name:'lvmanba1',
    age:10
    },
    {
    name:'lvmanba2',
    age:20
    },
    {
    name:'lvmanba3',
    age:30
    },
    {
    name:'lvmanba4',
    age:40
    },
])
</script>

四、动态插槽

父类中填充子类的具名插槽来自由于父类的对变量的赋值。

<template>
    <div class="content">
      <Dialog>
        <template #[name]>
          <div>我的位置决定于父类的变量的值</div>
        </template>
      </Dialog>
    </div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import Dialog from './components/Dialog/index.vue'
const name = ref("footer")
</script>