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

  • 开发
  • 42

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

示例效果

在这里插入图片描述

默认插槽（匿名插槽）

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

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

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

父组件代码

&
阅读全部

相关推荐

  3. Vue10 组件通信-插槽

    2023-12-06 11:24:03       12 阅读

  4. Vue 3插槽

    2023-12-06 11:24:03       40 阅读

  5. Vue3 插槽Slot

    2023-12-06 11:24:03       17 阅读

  8. vue组件render函数中作用域插槽使用方式

    2023-12-06 11:24:03       11 阅读

  10. vue3之RouterView插槽和过渡动效

    2023-12-06 11:24:03       19 阅读

最近更新

  4. TCP协议是安全的吗?

    2023-12-06 11:24:03       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2023-12-06 11:24:03       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2023-12-06 11:24:03       18 阅读

  18. 通过文章id递归查询所有评论（xml）

    2023-12-06 11:24:03       20 阅读

热门阅读

  1. linux 僵尸进程 关闭看不见的进程

    2023-12-06 11:24:03       30 阅读

  5. threejs WebGLRenderer 像素比对画布大小的影响

    2023-12-06 11:24:03       43 阅读

  7. 力扣：196. 删除重复的电子邮箱（Python3）

    2023-12-06 11:24:03       44 阅读

  9. QT基础教程(QPalette和QIcon)

    2023-12-06 11:24:03       32 阅读

  10. mysql中的case when then else end用法

    2023-12-06 11:24:03       40 阅读

  14. (C++20) consteval立即函数

    2023-12-06 11:24:03       42 阅读

  16. Spring MVC：构建高效、可维护、可扩展的Web应用程序

    2023-12-06 11:24:03       39 阅读

  17. [原创][第I部分][编程基础]我的C++ 98复习并升级到C++20的复习旅途

    2023-12-06 11:24:03       38 阅读

  20. map 和 flatMap 的区别

    2023-12-06 11:24:03       39 阅读

  22. 麒麟v10 数据盘初始化 gpt分区

    2023-12-06 11:24:03       45 阅读

  24. golang使用sip实现语音通话

    2023-12-06 11:24:03       38 阅读

  28. LightDB - 支持 last_day 函数[mysql兼容]

    2023-12-06 11:24:03       39 阅读