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

Vue66-vue-默认插槽

一、默认插槽需求

1-1、原本的写法:

在每个category组件中用v-show来做条件渲染,但是不方便!

 

1-2、默认插槽

img标签,ul标签,video标签,都是在app组件中完成解析之后,塞到category组件中的,所以,他们对应的样式可以都写在app组件中!此时,解析完的结构带着样式塞进组件中;

当然也可以写在category组件中,此时,解析完的结构没有样式,塞到组件中再渲染样式!

 

二、具名插槽需求

组件中有多个插槽

2-1、具名插槽

 

2-2、需求优化

 

或者:

或者:

<template>标签,可以像div一样包裹元素,但是,最终不生成真实的DOM元素。

当写了<template>标签,slot就有了新的写法:

三、作用域插槽

数据不变,但是根据数据所生成的结构变化。结构由使用者决定(app组件)

因为三个组件的数据都是一样的,所以,将数据放到category组件中

但是,插槽中的样式是由app组件负责的,需要将category组件中的数据games传给app组件 

谁往插槽中塞结构,插槽就把数据传给谁

注意:atguigu收到的是一个对象,因为这样,可以传多个值:

总是atguigu.xxxx比较烦,可以用解构赋值:

 或者,scope也可以有另一种写法:

 

四、小结

作用域插槽也能有名字name!

相关文章:

  • 01 Shell 编程规范与变量
  • Sklearn之朴素贝叶斯应用
  • IDEA GIt 提交提示 “Contents are identica“
  • ORA-25153 错误处理
  • 乡村振兴的科技创新引领:加强农业科技研发,推广先进适用技术,提高农业生产效率,助力美丽乡村建设
  • CLIP-guided Prototype Modulating for Few-shot Action Recognition
  • Java序列化进阶:Java内置序列化的三种方式
  • python3获取显示器信息并计算出各个显示器是多少寸
  • Spring学习笔记(九)简单的SSM框架整合
  • Java 笔记:常见正则使用
  • 示例:WPF中应用DataGrid读取实体DisplayAttribute特性自动自动生成列名
  • redHat9 安装 docker、docker-compose、iptables 过程记录
  • 【人工智能】文本提取技术的算法延伸
  • 免费的录屏软件,分享这5款
  • High-variance latent spaces
  • 【347天】每日项目总结系列085(2018.01.18)
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • Angular 响应式表单之下拉框
  • Angular6错误 Service: No provider for Renderer2
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • CentOS6 编译安装 redis-3.2.3
  • css的样式优先级
  • Elasticsearch 参考指南(升级前重新索引)
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • ES6系统学习----从Apollo Client看解构赋值
  • HTML5新特性总结
  • Java 23种设计模式 之单例模式 7种实现方式
  • java中的hashCode
  • LintCode 31. partitionArray 数组划分
  • MaxCompute访问TableStore(OTS) 数据
  • mysql常用命令汇总
  • PHP那些事儿
  • 闭包--闭包之tab栏切换(四)
  • 复杂数据处理
  • 关于extract.autodesk.io的一些说明
  • 基于Android乐音识别(2)
  • 快速体验 Sentinel 集群限流功能,只需简单几步
  • 聊聊hikari连接池的leakDetectionThreshold
  • 前端路由实现-history
  • 双管齐下,VMware的容器新战略
  • 微信小程序上拉加载:onReachBottom详解+设置触发距离
  • 想使用 MongoDB ,你应该了解这8个方面!
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 用element的upload组件实现多图片上传和压缩
  • 找一份好的前端工作,起点很重要
  • 2017年360最后一道编程题
  • NLPIR智能语义技术让大数据挖掘更简单
  • # Maven错误Error executing Maven
  • $.proxy和$.extend
  • (3)(3.5) 遥测无线电区域条例
  • (zt)最盛行的警世狂言(爆笑)
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (二)原生js案例之数码时钟计时
  • (翻译)terry crowley: 写给程序员
  • (分享)一个图片添加水印的小demo的页面,可自定义样式