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!

相关推荐
张风捷特烈几秒前
AI 四格笑话爆火,我做了什么?
前端·aigc
东方-教育技术博主1 分钟前
IDEA 配置electron开发环境
前端·javascript·electron
AC赳赳老秦3 分钟前
DeepSeek-Coder vs Copilot:嵌入式开发场景适配性对比实战
java·前端·后端·struts·mongodb·copilot·deepseek
一只专注api接口开发的技术猿7 分钟前
智能决策数据源:利用 1688 商品详情 API 构建实时比价与供应链分析系统
大数据·前端·数据库
程序员修心22 分钟前
CSS 选择器知识点
前端·css·css3
梦65026 分钟前
React + FullCalendar 实现高性能跨天事件日历组件
前端·react.js·前端框架
C_心欲无痕27 分钟前
react - 组件之间的通信
前端·javascript·react.js
走粥34 分钟前
JavaScript Promise
开发语言·前端·javascript
-CRzy35 分钟前
CTF之web-信息收集
前端
神算大模型APi--天枢64638 分钟前
合规落地加速期,大模型后端开发与部署的实战指南
大数据·前端·人工智能·架构·硬件架构