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!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/31053.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

汉朔科技IPO:引领智慧零售新时代,推动行业数字化转型

汉朔科技是一家以物联网无线通信技术为核心的高新技术企业&#xff0c;围绕零售门店数字化领域&#xff0c;构建了以电子价签系统、SaaS云平台服务等软硬件产品及服务为核心的业务体系。凭借公司技术实力、战略布局和多年行业积累&#xff0c;汉朔科技成为了零售门店数字化解决…

蓝鹏测控公司全长直线度算法项目多部门现场组织验收

关键字:全场直线度算法,直线度测量仪,直线度检测,直线度测量设备, 6月18日上午&#xff0c;蓝鹏测控公司全长直线度算法项目顺利通过多部门现场验收。该项目由公司技术部、开发部、生产部等多个部门共同参与&#xff0c;旨在提高直线度测量精度&#xff0c;满足高精度制造领域需…

Redis分片集群搭建

主从模式可以解决高可用、高并发读的问题。但依然有两个问题没有解决&#xff1a; 海量数据存储高并发写 要解决这两个问题就需要用到分片集群了。分片的意思&#xff0c;就是把数据拆分存储到不同节点&#xff0c;这样整个集群的存储数据量就更大了。 Redis分片集群的结构如…

LVGL使用GUI Guider配置STM32界面详细笔记教程

0、说明 接着前面几篇博客对LVGL的使用和介绍&#xff0c;这篇博客主要是使用和介绍快速配置LVGL图形界面编程的工具&#xff0c;GUI Guider。本文使用的工程代码&#xff0c;均是基于前几篇博客的基础上的&#xff0c;如需下载已配置好的LVGL-MCU工程环境&#xff0c;可通过如…

【R语言】对一个Plot绘制多个图,并且每个图单元也包含多个图

以一个Plot绘制五行六列共30个图&#xff0c;然后每30个图单元包含两个图为例&#xff1a; 如下图所示&#xff1a; 代码如下&#xff1a; for (i in 1:(5*6)) {create_subplots <- function() {library(ggplot2)library(dplyr)library(tidyr)# 创建一个随机的数据框simula…

【机器学习】机器学习重要方法—— 半监督学习:理论、算法与实践

文章目录 引言第一章 半监督学习的基本概念1.1 什么是半监督学习1.2 半监督学习的优势 第二章 半监督学习的核心算法2.1 自训练&#xff08;Self-Training&#xff09;2.2 协同训练&#xff08;Co-Training&#xff09;2.3 图半监督学习&#xff08;Graph-Based Semi-Supervise…

【服务器04】之【Navicat连接阿里云】

通过前三篇文章&#xff0c;现在我们测试可以连接数据库了 点开桌面的 接下找来的主机 地址在以下 登录阿里云 登陆账号后 点击控制台 输入RDS 弹出新页面&#xff0c;并点击运行中的 1 点管理 复制外网地址 鼠标靠近就会出现复制图标 用户名 和 密码 是注册阿里云的高权限账…

git常见实用命令,简单上手操作

常用命令&#xff1a; 添加远程账号名称&#xff1a;git config --global user.name ‘’ 添加用户eamil&#xff1a;git config --global user.email ‘’ 初始化厂库&#xff1a;git init 新建文件夹&#xff1a;mkdir 文件夹名 新建文件&#xff1a;touch 文件名 查看…

静态ip详解

静态IP&#xff08;Static IP&#xff09;是指在计算机网络中&#xff0c;手动配置的固定不变的IP地址。相对于动态IP地址&#xff08;由DHCP自动分配的临时IP地址&#xff09;&#xff0c;静态IP地址在分配后不会更改&#xff0c;适用于需要稳定、可预测网络地址的情况&#x…

对错问题:凡事没有绝对的对与错,要看义所在、良知所在

孔子说&#xff1a;君子对于天下所发生的很多事&#xff0c;如评判政策变动、战争等&#xff0c;没有绝对的对&#xff0c;也没有绝对的错&#xff0c;一切要看事情本身是否符合“ 义 ”。

实验2:RIPv2的配置

由于RIPv1是有类别的路由协议,路由更新不携带子网信息,不支持不连续子网、VLSM、手工汇总和验证等&#xff0c;本书重点讨论RIPv2。 1、实验目的 通过本实验可以掌握&#xff1a; RIPv1和 RIPv2的区别。在路由器上启动RIPv2路由进程。激活参与RIPv2路由协议的接口。auto-sum…

SpringSecurity实战入门——认证

项目代码 gson/spring-security-demo 简介 Spring Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架Shiro,它提供了更丰富的功能,社区资源也比Shiro丰富。 一般来说中大型的项目都是使用SpringSecurity来做安全框架。小项目有Shiro的比较多,因为相比…

WordPress管理员后台登录地址修改教程,WordPress admin登录地址文件修改方法

我们使用WordPress时&#xff0c;管理员后台登录默认地址为“域名/wp-login.php”或“域名/wp-admin”&#xff0c;为了安全&#xff0c;一般会把此地址改掉&#xff0c;防止有人恶意来攻击咱的WordPress&#xff0c;今天出个WordPress后台登录地址修改教程&#xff0c;修改之后…

如何用Xcode创建你的第一个项目?学起来

前言 上一期&#xff0c;咱们已经有安装XCode的教程了。有小伙伴说建议跳过&#xff0c;嗯。。。如果你对开发很熟悉&#xff0c;那可以。但如果不熟悉&#xff0c;建议还是按照教程一步步来哦&#xff01; 毕竟统一了开发工具&#xff0c;咱们后续讲的内容学习起来也会简单一…

[机器学习算法] K均值聚类

1. 了解聚类的基本概念 聚类是一种将数据集分组的无监督学习方法&#xff0c;目标是使得同一组内的数据点相似度较高&#xff0c;不同组之间的数据点相似度较低。 2. K均值聚类算法简介 K均值聚类是一种迭代算法&#xff0c;通过将数据分成K个簇来最小化簇内数据点到簇中心的…

【java】数学运算考试系统

目录 一、登录界面&#xff1a; 二、管理员界面&#xff1a; 三、学生考试界面&#xff1a; 面向小学低年级学生&#xff0c;随机生成两个整数的加减法算式要求学生解答。要求有用 户登录、注册等 GUI 界面&#xff0c;用户数据存入文件&#xff0c;体现面向对象编程思想。 …

推荐系统三十六式学习笔记:原理篇.矩阵分解12|如果关注排序效果,那么这个模型可以帮到你

目录 矩阵分解的不足贝叶斯个性化排序AUC构造样本目标函数训练方法 总结 矩阵分解在推荐系统中的地位非常崇高。它既有协同过滤的血统&#xff0c;又有机器学习的基因&#xff0c;可以说是非常优秀了&#xff1b;但即便如此&#xff0c;传统的矩阵分解无论是在处理显式反馈&…

Python学习打卡:day11

day11 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 目录 day1183、自定义 Python 包创建包导入包方式1方式2方式3方式4 84、安装第三方包安装第三方包——pippip的网络优化 安装第三方包——PyCharm 85、…

LeetCode 2748.美丽下标对的数目:模拟

【LetMeFly】2748.美丽下标对的数目&#xff1a;模拟 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-beautiful-pairs/ 给你一个下标从 0 开始的整数数组 nums 。如果下标对 i、j 满足 0 ≤ i < j < nums.length &#xff0c;如果 nums[i] 的 第一个…

获取真实IP总结

CDN&#xff1a;通过不同地理位置的缓存来加快访问速度&#xff0c;所以我们有可能访问的网口不是真实ip提供的网口。 思路&#xff1a; CDN是要钱的 CDN是基于静态解析的 1、DNS历史记录 找最早的那一条 因为网站刚开始搭建起来的时候&#xff0c;不会直接使用CDN 以下⼏个⽹…