vue3插槽的使用

news/2025/3/14 5:43:30/

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

1.插槽基本使用

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><!-- 插槽 --><slot></slot></div></template>
<script setup lang="ts">
</script>
父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent></SlotComponent></div>
</template><script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>
输出结果：

在这里插入图片描述

2.插槽默认内容

<template><div class="child-box"><p>我是子组件</p><!-- 插槽 --><slot><p>我是默认内容</p></slot></div>
</template>
<script setup lang="ts"></script>
输出结果：

在这里插入图片描述

3.具名插槽

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>
<script setup lang="ts"></script>

上段代码中我们添加了 3 个 slot 插槽，并且给其中两个 slot 标签添加了一个 name 属性，也就是每个插槽的名字。需要注意的是，上段代码中有一个插槽我们没有添加 name 属性，这个时候 Vue 会隐式的将这个插槽命名为“default”，

父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent><template #header><div>我是 header{{ message }}</div></template><template #default><div>我没有名字{{ message }}</div><div>我没有名字{{ message }}</div><div>我没有名字{{ message }}</div></template><template #footer><div>我是 footer{{ message }}</div></template></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
const message = ref("---我是父组建中的数据");
</script>
输出结果：

在这里插入图片描述

4.简写

原写法
<template v-slot:footer></template>
简写
<template #footer></template>

默认插槽与具名插槽混用

当一个子组件中既有具名插槽，又有默认插槽时，该如何渲染呢？

前面我们说默认插槽会被隐式的命名为 default，所以我们传入内容时可以将插槽名字改为 defalut 即可。

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>
<script setup lang="ts"></script>
父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent><template #header><div>我是 header{{ message }}</div></template><template #default><div>我没有名字{{ message }}</div><div>我没有名字{{ message }}</div><div>我没有名字{{ message }}</div></template><template #footer><div>我是 footer{{ message }}</div></template></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
const message = ref("---我是父组建中的数据");
</script>
输出结果：

在这里插入图片描述

5.插槽作用域问题

上段代码中 message 是我们在父组件中定义的数据，但是在我们的子组件SlotComponent 中渲染了出来，说明子组件中的插槽是可以访问到父组件中的数据作用域的，但是反过来是不行的，因为我们无法通过插槽拿到子组件的数据。

- 总结：
  • 插槽内容可以访问到父组件的数据作用域，就好比上述中的 message 是父组件的。
  • 插槽内容无法访问到子组件的数据，就好比上述 App.vue 中的插槽内容拿不到子组件 child 的数据。

6.作用域插槽

前一节我们说父组件中的插槽内容是无法访问到子组件中的数据的，但是，万一我们有需求就是需要在插槽内容中获取子组件数据怎么办呢？

6.1默认插槽作用域传值

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><slot text="我是子组件" :count="1"></slot></div>
</template>
<script setup lang="ts"></script>
父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent v-slot="slotProps"><div>{{ slotProps.text }}---{{ slotProps.count }}</div></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>
输出结果：

在这里插入图片描述
上段代码中我们在子组件中 slot 标签上添加了一些自定义属性，属性值就是我们想要传递给父组件的一些内容。在父组件 中通过 v-slot="slotProps"等形式接收子组件传过来的数据，slotProps 的名字是可以任意取的，它是一个对象，包含了所有传递过来的数据。

需要注意的是，子组件传递过来的数据只能在子组件这个标签内使用。

父组件解构写法：
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent v-slot="{ text, count }"><div>{{ text }}---{{ count }}</div></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>

6.2具名插槽作用域传值

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><slot name="header" text="我是子组件的" :count="1"></slot></div>
</template>
<script setup lang="ts"></script>
父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent><template #header="{ text, count }"><div>{{ text }}---{{ count }}</div></template></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>

上段代码中我们给 slot 添加了一个 name，在父组件中接收数据的时候不在采用 v-slot=““形式了，而是直接再插槽内容上采用#header=”“形式，当时这是简写形式，你也可以写为：v-slot:header=””

6.tsx中插槽的使用

子组件
<script lang="tsx">import { defineComponent} from 'vue';export default defineComponent({setup(props, context) {const {slots}=contextreturn () => (<div>默认插槽: {slots.default && slots.default()}</div>);},});
</script>
<style scoped></style>
父组建写法一
<script lang="tsx">import { defineComponent } from 'vue';import Child from './component/child.vue'export default defineComponent({setup() {const text = ref("欢迎");return () => (<div style="color: red" class="my-test"><h1 v-text={text.value}></h1><p>333</p><Child v-slots={{default: () => '默认的内容是'}}/></div>);},});
</script>
<style scoped></style>
父组建写法二
<script lang="tsx">import { defineComponent } from 'vue';import Child from './component/child.vue'export default defineComponent({setup() {const text = ref("欢迎");return () => (<div style="color: red" class="my-test"><h1 v-text={text.value}></h1><p>333</p><Child>{{default: () => '默认的内容是'}}</Child></div>);},});
</script>
<style scoped></style>
输出结果：

在这里插入图片描述

7.插槽高阶用法

  • 实际开发中可以遇到组件层层嵌套，如果遇到一下情况如何解决。
    7.1. 如果父组件需要拿到子组件的数据
    7.2. 父组件还需要拿到孙组件的数据
父组件 useSlot.vue
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent><template #action="data"><div>我是 action----{{ data.text }}</div></template><template #SlotDemo="data"><div>我是 SlotDemo----{{ data.obj.text }}</div></template></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>

注释：

  • #action="data"中的data为子组件中传递过来的数据
  • #SlotDemo="data"中的data为孙组件中传递过来的数据
子组件 SlotComponent.vue
<script lang="tsx">
import SlotDemo from "./SlotDemo.vue";
import { Slots } from 'vue'
export default defineComponent({name:'SlotComponent',setup(props,{ attrs,slots,emit,expose }){let state=reactive({ text:'我是子组件中的数据' })//slots收到的插槽集合//slot 当前插槽的名字  默认是default//data 要传给插槽的数据const getSlot = (slots: Slots, slot = 'default', data?: Recordable) => {const slotFn = slots[slot] //获取到父组件SlotDemo插槽if (!slotFn) return null //如果没在父组件找到插槽  就return nullreturn slotFn(data)// 将数据data传递给父组件中的插槽}return () =>(<><div>{slots.action?.(state)}</div><SlotDemo>{{  default: (data) => getSlot(slots,'SlotDemo',data),}}</SlotDemo></>)}
})
</script>

注释：

  • default: (data) => getSlot(slots,'SlotDemo',data),：default代表SlotDemo组件中的默认插槽data表示SlotDemo组件上v-bind绑定的参数,
  • getSlot(slots,'SlotDemo',data)：在slots中找到插槽SlotDemo，将参数data传给插槽SlotDemo，并返回插槽SlotDemo中的内容。
孙组件 SlotDemo.vue
<template><div class="SlotDemo"><slot :obj="obj"></slot></div>
</template>
<script>
export default defineComponent({setup() {let obj=reactive({ text:'我是孙子组件' })return { obj }},
})
</script>

注释：

  • :obj="obj"表示要传给父组件的数据
输出结果：

在这里插入图片描述


http://www.ppmy.cn/news/47670.html

相关文章

【计算机专业应届生先找培训还是先找个工作过渡一下？】

【计算机专业应届生先找培训还是先找个工作过渡一下？】

计算机专业应届生先找培训还是先找个工作过渡一下&#xff1f; 计算机应届生是先培训还是先工作&#xff0c;这个问题应该困扰了很多专业技能一般的同学&#xff0c;尤其是学历方面还没有优势的普通本专科院校。都说技术与学历优秀的人进大厂&#xff0c;技术一般学历优秀的人能…
阅读更多...
树莓派 QT项目开机自启动

树莓派 QT项目开机自启动

我自己用qt设置了一个界面&#xff0c;如何让他开机自启动呢&#xff1f; 目录 1.生成qt项目的可执行文件 2. 编写一个自启动脚本 3.重启树莓派 1.生成qt项目的可执行文件 QT项目的可执行文件就是.exe文件。首先在qt中打开&#xff0c;点击红色方框图标&#xff0c;选择Re…
阅读更多...
IO进程间的通信详解（嵌入式学习）

IO进程间的通信详解（嵌入式学习）

进程间通信 这次更新内容比较干巴&#xff0c;满满嚼&#xff0c;把例子敲一遍好好理解。如果您着急&#xff0c;请直接打开目录跳转到对您有价值的部分管道无名管道(PIPE)特点使用方法举个栗子 有名管道(FIFO)特点使用方法举个栗子 信号概念响应方式信号函数举个栗子&#xff…
阅读更多...
冯诺依曼体系结构+操作系统

冯诺依曼体系结构+操作系统

目录 冯诺依曼体系结构 基本概念 基本原理 操作系统 基本概念 设计OS的目的 管理的本质 管理的方法 系统调用和库函数 冯诺依曼体系结构 基本概念 冯诺依曼结构也称普林斯顿结构&#xff0c;是一种将程序指令存储器和数据存储器合并在一起的存储器结构。 ... 数学…
阅读更多...
24个强大的HTML属性，建议每位前端工程师都应该掌握！

24个强大的HTML属性，建议每位前端工程师都应该掌握！

HTML属性非常多&#xff0c;除了一些基础属性外&#xff0c;还有许多有用的特别强大的属性 本文将介绍24个强大的HTML属性&#xff0c;可以使您的网站更具有动态性和交互性&#xff0c;让用户感到更加舒适和愉悦。 让我们一起来探索这24个强大的HTML属性吧&#xff01; 1、Acc…
阅读更多...
js+css实现简单的弹框动画

js+css实现简单的弹框动画

效果图 只是一个简单的演示demo&#xff0c;但是可以后面可以优化样式啥的 刚开始元素的display为none&#xff0c;然后&#xff0c;为了给元素展示时添加一个动画&#xff0c;首先要添加样式类名show&#xff0c;让它覆盖display:none&#xff0c;变得可见。然后&#xff0c;添…
阅读更多...
docker+jenkins+maven+git构建聚合项目，实现自动化部署，走了800个坑

docker+jenkins+maven+git构建聚合项目，实现自动化部署，走了800个坑

流程 主要的逻辑就是Docker上安装jenkins&#xff0c;然后拉取git上的代码&#xff0c;把git上的代码用Maven打包成jar包&#xff0c;然后在docker运行 这个流程上的难点 一个是聚合项目有可能Maven install的时候失败。 解决办法&#xff1a;在基础模块的pom文件上添加 <…
阅读更多...
【数据结构】堆的应用（堆排序的实现 + （向上/向下）建堆时间复杂度证明 + TopK问题（笔记总结））

【数据结构】堆的应用（堆排序的实现 + （向上/向下）建堆时间复杂度证明 + TopK问题（笔记总结））

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&…
阅读更多...
最新文章

Copyright @ 2022~2023