15.（vue3.x+vite）组件间通信方式之默认插槽（匿名插槽）

已于 2023-09-20 16:16:27 修改
阅读量83 收藏 2
点赞数 2
分类专栏： 前端技术社区 文章标签： vue.js 前端 javascript 组件间通讯 vue3.x+vite 组件间通讯方式 默认插槽
于 2023-09-20 14:57:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60387551/article/details/133080683
版权
前端技术社区 专栏收录该内容
42 篇文章 1 订阅 ¥49.90 ¥99.00
订阅专栏

前端技术社区总目录（订阅之前请先查看该博客）

示例效果

在这里插入图片描述

默认插槽（匿名插槽）

插槽 slot 通常用于两个父子组件之间，最常见的应用就是我们使用一些 UI 组件库中的弹窗组件时，弹窗组件的内容是可以让我们自定义的，这就是使用了插槽的原理。

（1）slot 是 Vue中的内置标签。
（2）slot 相当于给子组件挖出了一个槽，可以用来填充内容。
（3） 父组件中调用子组件时，子组件标签之间的内容元素就是要放置的内容，它会把 slot 标签替换掉。

注：
（1）slot 标签内的内容就是默认内容，也就是当父组件没有传递给子组件内容时，子组件就会默认渲染 slot 内部的内容，但是 slot 标签是不会渲染出来的。
（2）插槽内容可以访问到父组件的数据作用域
（3）插槽内容无法访问到子组件的数据

父组件代码

了解本专栏 订阅专栏 解锁全文
GIS之家家长
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
16.（vue3.x+vite）组件间通信方式之具名插槽
GIS之家家长
09-20 86
16.（vue3.x+vite）组件间通信方式之具名插槽
18.（vue3.x+vite）组件间通信方式之v-model
地图之家
12-13 156
18.（vue3.x+vite）组件间通信方式之v-model
17.（vue3.x+vite）组件间通信方式之作用域插槽
地图之家
12-12 108
17.（vue3.x+vite）组件间通信方式之作用域插槽
【优质书籍推荐】Vue.js 3.x+Element Plus从入门到精通
热门推荐
weixin_43178406的博客
04-30 4万+
本文深入讲解了全栈开发巨作：《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，希望能对学习Vue.js+Element Plus框架的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
vue3+vite+ts--插槽slot的详细使用
m0_60893808的博客
06-06 660
Vue插槽是Vue中常见的一种组件间的相互通信方式，作用是让父组件可以向子组件指定位置插入html结构，适用于，在要接收数据的组件页面通过标签来表示，简单来说，就是通过此标签来起到占位的作用，而要插入的内容也会对应到标签所在的位置，插槽又分为匿名插槽、具名插槽、作用域插槽。
Vue3+Vite+Pinia 项目的搭建以及常用方法介绍
半兽先生的博客
10-09 866
Vue3+Vite+Pinia 项目的搭建以及常用方法介绍
vue3+ts+vite 路由详解
微光无限的博客
11-03 6012
vue3+ts+vite 路由详解
Vue3.2+Pinia+VueRouter+Vite+TS环境搭建及知识点学习
qq_42717015的博客
01-12 857
Vue3+vue-router+Vite+TS环境搭建及笔记
VUE3+vite
weixin_41184962的博客
03-24 3876
vue3 新特性 + vite 防抖和节流 Vue 没有内置支持防抖和节流，但可以使用Lodash等库来实现。 如果某个组件仅使用一次，可以在methods中直接应用防抖： <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js">&...
15.（vue3.x+vite）组件间通信方式之默认插槽（匿名插槽）.rar
09-20
本教程将详细探讨Vue 3.x中组件间通信的一种方法——默认插槽（匿名插槽）。 默认插槽（Anonymous Slot）是Vue.js中的一个核心特性，它允许父组件向子组件传递内容。在Vue 3.x中，这个功能得到了进一步增强，使其更...
16.（vue3.x+vite）组件间通信方式之具名插槽.rar
09-20
通过这种方式，我们可以在Vue 3.x和Vite环境中有效地使用具名插槽进行组件间通信。具名插槽的灵活性使得组件设计更加模块化，提高了代码的可维护性和可复用性。同时，结合Vite的强大功能，可以提升开发效率，带来更...
17.（vue3.x+vite）组件间通信方式之作用域插槽.rar
09-20
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
18.（vue3.x+vite）组件间通信方式之v-model.rar
09-20
本示例"18.（vue3.x+vite）组件间通信方式之v-model.rar"将深入探讨如何在Vue 3.x和Vite构建环境中利用`v-model`进行组件间的双向数据绑定。 首先，Vue 3.x中的`v-model`不再局限于输入元素，而是扩展到了自定义...
4.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）.rar
09-22
在Vue 3.x和Vite的环境中，与Element Plus组件库配合使用时，有时我们需要根据项目需求自定义组件样式，例如修改`el-table`表格组件的样式。Element Plus是基于Vue 3的UI组件库，提供了丰富的组件供开发者使用。在本...
【Vue】 style中的scoped
DX390609的博客
07-15 166
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 557
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vuejs v-for和v-if同时使用报变量未定义
业余程序猿
07-14 320
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
使用 Vue 和 ECharts 打造动态数据可视化图表
最新发布
liyananweb的博客
07-18 523
通过本文，我们了解了如何使用 Vue 和 ECharts 来创建一个简单的柱状图，并实现了动态数据更新。Vue 的响应式数据绑定和 ECharts 的强大图表功能相结合，使得我们可以轻松地构建出功能强大且美观的数据可视化应用。希望这篇文章对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言。百万大学生都在用的AI论文写作工具，篇篇无重复👉:AI论文写作。
vue3+vite项目里列表需要做无限滚动，有什么好的插件呢
09-14
在 Vue3 + Vite 项目中实现无限滚动可以使用一些常用的插件，例如： 1. vue-infinite-loading：Vue.js 的一个插件，实现了无限滚动加载数据的功能。它可以很容易地与 Vue3 + Vite 项目集成，并且支持多种定制选项。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS之家家长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值