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!

相关推荐
大虾写代码9 小时前
nvm和nrm的详细安装配置,从卸载nodejs到安装NVM管理nodejs版本,以及安装nrm管理npm版本
前端·npm·node.js·nvm·nrm
星哥说事9 小时前
下一代开源 RAG 引擎,让你的 AI 检索与推理能力直接起飞
前端
....4929 小时前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
machinecat9 小时前
Webpack模块联邦 - vue项目嵌套react项目部分功能实践
前端·webpack
今禾9 小时前
深入浅出:ES6 Modules 与 CommonJS 的爱恨情仇
前端·javascript·面试
前端小白19959 小时前
面试取经:Vue篇-Vue2响应式原理
前端·vue.js·面试
子兮曰9 小时前
⭐告别any类型!TypeScript从零到精通的20个实战技巧,让你的代码质量提升300%
前端·javascript·typescript
前端AK君9 小时前
如何开发一个SDK插件
前端
小满xmlc9 小时前
WeaveFox AI 重新定义前端开发
前端
日月晨曦9 小时前
大文件上传实战指南:让「巨无霸」文件也能「坐高铁」
前端