当前位置: 首页 > news >正文

FE_Vue学习笔记 插槽 slot

插槽分为匿名插槽、具名插槽、作用域插槽。子组件中:

  1. 匿名插槽只能有一个;
  2. 可以有多个具名插槽;
  3. 作用域插槽中可以有匿名插槽和具名插槽。

当项目中一个组件可以多次复用时,我们可以把这个组件封装成单独的.vue文件,从而可以在不同的页面中引入该组件,从而实现组件的复用,我们称这个.vue文件为子组件,需要用到这个子组件的页面我们称为父组件。

当子组件中可以决定自己的大概结构,但是有些内容的展示与否,或者展示的形式子组件不能决定,需要由父组件来决定之后传给子组件时,需要使用到作用域插槽(匿名插槽和具名插槽辅助作用域插槽),父组件决定内容,子组件决定位置。

子组件通过slot为父组件传递过来的内容进行占位,父组件将数据传递过来填充slot

1 匿名插槽 - 只能有一个

在这里插入图片描述

2 具名插槽-可以有多个

父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中。slot存在于子组件,v-slot在父组件,最终页面展示结果是父组件。
在这里插入图片描述

3 作用域插槽

作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

  1. 子组件存放一个带数据的插槽
  2. 父组件通过 “slot-scope” 来接收子组件传过来的插槽数据,再根据插槽数据来填充插槽的内容
    在这里插入图片描述

作用域插槽绑定了一套数据,父组件可以拿来用。于是,情况就变成了这样:样式父组件说了算,但内容可以显示子组件插槽绑定的
我们再来对比,作用域插槽跟单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件提供的模板一般要既包括样式又包括内容,而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下)。

http://www.lryc.cn/news/68098.html

相关文章:

  • 单链表的成环问题
  • 横截面收益率
  • C++解析JSON JSONCPP库的使用
  • 不会Elasticsearch标准查询语句,如何分析数仓数据?
  • 获得GitHub Copilot并结合VS Code使用
  • Java基础-判断和循环
  • ESP32 FreeRTOS学习总结
  • uniapp打包ios保姆式教程【最新】
  • Thread线程学习(2) Linux线程的创建、终止和回收
  • linux-项目部署软件安装
  • Vue3-黑马(三)
  • 标准C库函数fprintf(),sprintf(),snprintf()的函数使用方法(往文件中写入数据,将变量的值转换成字符串输出)
  • 不到1分钟,帮你剪完旅行vlog,火山引擎全新 AI「神器」真的这么绝?
  • MySQL的概念、编译安装,以及自动补全
  • Jmeter常见问题和工作中遇到的问题解决方法汇总
  • 蓝牙单连接和多连接知识
  • Mongodb—查询数据报错 Sort operation used more than the maximum 33554432 bytes of RAM
  • Java内存异常和垃圾回收机制
  • linux系统挂载逻辑卷和扩展逻辑卷组
  • WPF:WPF原生布局说明
  • SpringMVC常用注解用法
  • Liunx find locate 命令详解
  • JAVA并发专题(1)之操作系统底层工作的整体认识
  • WiFi(Wireless Fidelity)基础(七)
  • Agilent安捷伦33522B任意波形发生器
  • PostgreSQL-如何创建并发索引
  • 【大数据模型】使用Claude浅试一下
  • 鼎盛合——国产电量计芯片的分类与发展
  • 交叉验证之KFold和StratifiedKFold的使用(附案例实战)
  • Cloud Kernel SIG月度动态:发布ANCK 5.10、4.19新版本,ABS新增仓库构建功能