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!

相关推荐
DevUI团队7 小时前
接口即代码:一个Skill轻松搞定类型定义、接口调用、Mock与调试
前端·agent·ai编程
DevUI团队7 小时前
从截图到企业级前端页面:2个Skill,1次对话,10X效率开发符合设计/编码规范的页面
前端·agent·ai编程
xiaofeichaichai7 小时前
网络与跨域
前端·网络
七牛云行业应用8 小时前
别每次重复配置了!CLAUDE.md + Hooks 让 Claude Code 开箱就记住你的规则
前端
超人气王8 小时前
新手学前端 JavaScript 类型判断:一篇彻底搞懂 typeof、instanceof 和 Object.prototype.toString
前端·javascript
LucianaiB8 小时前
耗时30天,DocPilot Qwen正式开源:一个免费无广的开源文档 AI 助手
前端·后端
xiaoshuaishuai88 小时前
C# AvaloniaUI 资源找不到报错
java·服务器·前端·windows·c#
How_doyou_do8 小时前
26字节工程营-前端-自我总结
前端
十有八七8 小时前
🧩 组件库死亡倒计时?—— AI 编码冲击下的前端基础设施重构
前端·人工智能
风止何安啊8 小时前
我一个前端仔,居然用 Python 搞起了 AI?从零到一,撸了个 AI 聊天框小 demo
前端·人工智能·后端