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!

相关推荐
用户21411832636022 分钟前
Google Nano Banana Pro图像生成王者归来
前端
文心快码BaiduComate14 分钟前
下周感恩节!文心快码助力感恩节抽奖页快速开发
前端·后端·程序员
_小九15 分钟前
【开源】耗时数月、我开发了一款功能全面的AI图床
前端·后端·图片资源
恋猫de小郭33 分钟前
聊一聊 Gemini3、 AntiGravity 和 Nano Banana Pro 的体验和问题
前端·aigc·gemini
一 乐1 小时前
英语学习激励|基于java+vue的英语学习交流平台系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·学习·小程序
淡淡蓝蓝1 小时前
uni.uploadFile使用PUT方法上传图片
开发语言·前端·javascript
老华带你飞1 小时前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·微信小程序·论文·毕设·个人健康系统
JIngJaneIL1 小时前
停车场管理|停车预约管理|基于Springboot+的停车场管理系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·notepad++·停车场管理|
晴殇i1 小时前
用户登录后,Token 到底该存哪里?从懵圈到精通的全方位解析
前端·面试
零一科技1 小时前
Vue3学习第七课:(Vuex 替代方案)Pinia 状态管理 5 分钟上手
前端·vue.js