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!

相关推荐
stella·5 分钟前
后端二进制文件,现代前端如何下载
前端·ajax·状态模式·axios·request·buffer·download
奋斗猿6 分钟前
Less vs Scss 全解析:从语法到实战的前端样式预处理器指南
前端
Web - Anonymous9 分钟前
使用Vue3 + Elementplus + Day.js 实现日期选择器(包括日、周、月、年、自定义) - 附完整示例
前端·javascript·vue.js
冴羽12 分钟前
2025 年 HTML 年度调查报告亮点速览!
前端·javascript·html
张元清12 分钟前
浏览器硬导航优化:提升用户体验的关键
前端·javascript·面试
程序员爱钓鱼15 分钟前
Node.js 编程实战:博客系统 —— 用户注册登录与文章管理
前端·后端·node.js
xkxnq16 分钟前
第二阶段:Vue 组件化开发(第 23天)
前端·javascript·vue.js
zcz160712782117 分钟前
nmcli常见操作
前端·chrome
晴栀ay20 分钟前
JS的超集——TypeScript
前端·react.js·typescript
EndingCoder21 分钟前
高级类型:联合类型和类型别名
linux·服务器·前端·ubuntu·typescript