默认插槽

插槽可以让父组件给子组件传递模板片段

在父组件中，在组件内编写模板片段传递给子组件
在子组件中，编写 slot 元素，指定模板片段输出的位置

插槽内容可以访问到父组件的数据，但无法访问到子组件的数据。因为插槽本身是在父组件模板中定义的
可以在子组件的 slot 标签内设置插槽的默认内容。当父组件没有提供任何插槽内容时，子组件会渲染默认内容

<template><!-- 在组件内编写模板片段传递给子组件 --><HelloWorld> {{ content }} </HelloWorld>
</template><script lang="ts" setup>
import HelloWorld from '@/components/HelloWorld.vue';
import { ref } from 'vue';const content = ref('插槽内容');
</script>

<template><p><!-- 编写 `slot` 元素，指定模板片段输出的位置 --><slot> 插槽默认内容 </slot></p>
</template>

具名插槽

当一个组件中包含多个插槽出口时，需使用具名插槽指定父组件中的内容要传到哪个 slot 元素内

在子组件中，给 slot 元素设置 name attribute，来唯一标识各个插槽

没有提供 name 的 slot 会隐式地命名为 'default'
在父组件中，给 template 元素设置 v-slot 指令，并将目标插槽的名字传给该指令

v-slot 指令可以简写为 #
- 默认插槽写法：v-slot / v-slot:default / #default
- 具名插槽写法：v-slot:XXName / #XXName

<template><p><slot name="header"> header 插槽默认内容 </slot><slot> 插槽默认内容 </slot><slot name="footer"> footer 插槽默认内容 </slot></p>
</template>

<template><HelloWorld><template #header> header </template><template #default> default </template><template #footer> footer </template></HelloWorld>
</template><script lang="ts" setup>
import HelloWorld from '@/components/HelloWorld.vue';
</script>

当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 template 节点都被隐式地视为默认插槽内容。
所以上例可以写成：

<template><HelloWorld><template #header> header </template><!-- 隐式的默认插槽 -->default<template #footer> footer </template></HelloWorld>
</template>

作用域插槽

在某些场景下，插槽的内容需要使用到子组件中的数据。此时可以使用作用域插槽

在子组件中，给 slot 元素设置自定义属性，以传递数据给父组件
在父组件中，从 v-slot 指令的值中获取子组件传递过来的数据
- 默认插槽写法：v-slot="XXX" / v-slot:default="XXX" / #default="XXX"
- 具名插槽写法：v-slot:XXName="XXX" / #XXName="XXX"

注意插槽上的 name 是一个 Vue 特别保留的 attribute，不会作为 props 传递给插槽

<template><p><slotname="header"text="header slot">header 插槽默认内容</slot><!-- 使用 v-bind 设置自定义属性 --><slot v-bind="data"> 插槽默认内容 </slot></p>
</template><script setup lang="ts">
import { ref } from 'vue';const data = ref({ text: 'default slot', number: 1 });
</script>

<template><HelloWorld><template #header="headerData"> header: {{ headerData }} </template><!-- 使用 [解构赋值] 获取子组件传递过来的数据 --><template #default="{ text, number }"> default: {{ text }} - {{ number }}</template></HelloWorld>
</template><script lang="ts" setup>
import HelloWorld from '@/components/HelloWorld.vue';
</script>

动态插槽名

可以给 v-slot 指令传递动态参数，就可以定义动态插槽名啦

动态参数中表达式的值只能为 String / null；null 表示移除该绑定
动态参数表达式有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的；
推荐使用 [计算属性] 替换复杂的表达式

<base-layout><template v-slot:[dynamicSlotName]>...</template><!-- 缩写为 --><template #[dynamicSlotName]>...</template>
</base-layout>

【Vue3】如何使用插槽相关推荐

Vue3中slot插槽使用方式
一文搞懂Vue3中slot插槽的使用! 使用 Vue 的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂.插槽(slot)可以说在一个 Vue 项目里面处处都有它的身影,比如 ...
vite+vue3使用slot插槽
如何简单明了使用slot插槽在官网已经表明如何使用,但我觉得看的有点小乱,本文章记录一下,也是整理自己的思路使用solt的理由:在不同的组件使用,它最核心的地方展示是不一样的,但其它的地方是一样的 ...
Vue3.0的插槽是如何实现的？
Vue提供了pro可以进行参数的传递,但是有时需要给子组件的模板进行定制化,此时传递参数有时候就不太方便了. Vue借鉴了Web Components实现了插槽slot. 插槽slot通过在父组件中编 ...
前端之vue2 vue3插槽
vue插槽一.默认插槽二.具名插槽 (多个插槽) vue3已弃用该方法 vue3支持\ vue3的作用域插槽总结一.默认插槽 1.在组件中留下插槽slot <template>&l ...
vue3中的setup函数
一.概念: setup是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据.方法等等,都要配置在setup中. 二.详解: setup函数的返回值有两种 1.返回一个渲染函数,可以自定义 ...
【分享】免梯子的GPT，玩 ChatGPT 的正确姿势
火了一周的 ChatGPT,HG 不允许还有小伙伴不知道这个东西是什么?简单来说就是,你可以让它扮演任何事物,据说已经有人用它开始了颜色文学创作.因为它太火了,所以,本周特推在几十个带有"c ...
javascript_javascript吊装
javascript Hoisting is a JavaScript mechanism where variables and function declarations are moved to ...
vue表格显示图片，采用element ui实现
项目场景: vue表格显示图片,采用element ui实现 <template><el-table :data="tableData" style=" ...
Non-function value encountered for slot “role“. Prefer function slots for better performance.
shi控制台出现警告:Non-function value encountered for slot "role". Prefer function slots for bette ...
使用vue实现九宫格抽奖功能
使用vue2和vue3分别实现九宫格抽奖功能关于九宫格抽奖的功能,想必大家都见过.外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能. 本demo使用技术:vue2/vue3,作 ...

【Vue3】如何使用插槽

默认插槽

具名插槽

作用域插槽

动态插槽名

【Vue3】如何使用插槽相关推荐

最新文章

热门文章