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!

相关推荐
续亮~2 小时前
6、Redis系统-数据结构-05-整数
java·前端·数据结构·redis·算法
顶顶年华正版软件官方3 小时前
剪辑抽帧技巧有哪些 剪辑抽帧怎么做视频 剪辑抽帧补帧怎么操作 剪辑抽帧有什么用 视频剪辑哪个软件好用在哪里学
前端·音视频·视频·会声会影·视频剪辑软件·视频剪辑教程·剪辑抽帧技巧
程序员云翼4 小时前
7-理财平台
java·vue.js·spring boot·后端·毕设
托尼沙滩裤4 小时前
【js面试题】js的数据结构
前端·javascript·数据结构
不熬夜的臭宝4 小时前
每天10个vue面试题(一)
前端·vue.js·面试
朝阳395 小时前
vue3【实战】来回拖拽放置图片
javascript·vue.js
不如喫茶去5 小时前
VUE自定义新增、复制、删除dom元素
前端·javascript·vue.js
长而不宰5 小时前
vue3+electron项目搭建,遇到的坑
前端·vue.js·electron
阿垚啊5 小时前
vue事件参数
前端·javascript·vue.js
加仑小铁5 小时前
【区分vue2和vue3下的element UI Dialog 对话框组件,分别详细介绍属性,事件,方法如何使用,并举例】
javascript·vue.js·ui