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

2023-12-13 04:31:14

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

示例效果

在这里插入图片描述

默认插槽（匿名插槽）

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

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

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

父组件代码

&

文章来源:https://blog.csdn.net/QQ98281642/article/details/134810533
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。