Vue2进阶篇-插槽的详细使用

插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽

使用方式：

默认插槽：

父组件中：<Category><div>html结构1</div></Category>
子组件中：<template><div><!-- 定义插槽 --><slot>插槽默认内容...</slot></div></template>

具名插槽：

父组件中：<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template></Category>
子组件中：<template><div><!-- 定义插槽 --><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div></template>

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
注意：自Vue2.6以后slot与slot-scope都被弃用了，取而代之的是v-slot。
缩写：v-slot可以缩写为#，例：v-slot:header => #header

具体编码：
v-slot:[插槽名]="{ 插槽 prop,可解耦获取,也可以 newName：oldName 重命名,此处可接收多个 }"，子组件传递方式：<slot :xx1='数据1' :xx2='数据2'></slot>

父组件中：<Category><template v-slot:default="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template v-slot="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
子组件中：<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

Vue2进阶篇-插槽的详细使用相关推荐

vue2进阶篇：vue-router之“使用独享路由守卫”
文章目录 10.13路由守卫案例:将案例改为"使用独享路由守卫" 完整代码本人其他相关文章链接 10.13路由守卫注意点1: 前置路由守卫或者后置路由守卫中,to指代切换到哪 ...
vue2进阶篇：vue-router之路由的2种工作模式
文章目录 10.14路由的2种工作模式本人其他相关文章链接 10.14路由的2种工作模式注意点1: 问题:路由的2种工作模式答案:hash模式和history模式.其中hash模式就是url路径 ...
vue2进阶篇：vue-router之路由的params参数
文章目录 10.7路由的params参数案例:将案例改为"路由的params参数" 完整代码本人其他相关文章链接 10.7路由的params参数注意点1: 跳转路由并携带pa ...
Vue2进阶篇-组件间通信的6钟方式
目录一.props 二.自定义事件三.全局事件总线四.pubsub-js(发布与订阅) 五.Vuex 六.slot插槽一.props 使用场景:父子组件通信注意: 父给子传递:传递的是数据. ...
ML与math：机器学习与高等数学基础概念、代码实现、案例应用之详细攻略——进阶篇
ML与math:机器学习与高等数学基础概念.代码实现.案例应用之详细攻略--进阶篇目录人工智能数学基础综合人工智能数学基础之高等数学 1.哈夫曼编码Huffman Coding简介及代码实现人 ...
超详细图解！【MySQL进阶篇】存储过程,视图,索引,函数,触发器
超详细图解![MySQL进阶篇]存储过程,视图,索引,函数,触发器 1.1 下载Linux 安装包 1.2 安装MySQL 1.3 启动 MySQL 服务 1.4 登录MySQL 2\. 索引 2.1 ...
Python数据可视化之散点图(进阶篇---图文并茂详细版！！！)
散点图进阶篇数据获取数据展示数据分析 1.确定横纵坐标的选择 2.准备标签的列表与颜色 4.确定横纵坐标的值 5.绘制基础图像数据获取 •进阶散点图可视化需要大量的数据,网上有很多获取数据的来 ...
Java面试题-进阶篇(2022.4最新汇总)
Java面试题-进阶篇 1. 基础篇 1.1 基本数据类型和包装类 1.2 Double转Bigdecimal可能会出现哪些问题?怎么解决? 1.3 equals 与 == 的区别? 1.4 Java ...
Linux进阶篇--网络管理
Linux进阶篇–网络管理 12.1 CentOS 6网络管理基本网络配置将Linux主机接入到网络,需要配置网络相关设置. 一般包括如下内容: 主机名 IP/netmask 路由:默 ...

Vue2进阶篇-插槽的详细使用

插槽

Vue2进阶篇-插槽的详细使用相关推荐

最新文章

热门文章