Vue之插槽Slot理解
时间:2022-07-22
本文章向大家介绍Vue之插槽Slot理解,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
刚开始看的时候,以为Vue
的插槽和React
一样,我定睛一看,md
原来不对,怎么越看越像React
的props.children
属性,但是比React
这个属性要?一点。
插槽内容 (和children就一样了)
给大家搞个?
<my-component>这里的内容如果需要保留,就需要在my-component中使用 slot,如果不使用将丢弃这段内容</my-component>
<slot>如果组件被使用 中间并没有传递任何内容的话 这个作为后备内容,也就是默认内容, 如果传递了则覆盖</slot>
多个插槽
多个插槽使用 v-slot
这个指令只能放在 template
上,在使用slot的时候指定name属性,例如
- my-component.vue
<div>
<slot name="header"></slot>
</div>
- main.vue
<div>
<my-component>
<template v-slot:header> // 可以使用简写 #header
这是头部插槽内容
</template>
</my-component>
</div>
插槽作用域
主要解决一个常见问题:父组件如何获取子组件的数据 并渲染
- my-component.vue
<template>
<div>
// 将headerData 通过v-bind暴露给父组件
<slot name="header" v-bind:data="headerData"></slot>
</div>
</template>
<script>
export default {
props: {
},
data() {
return {
headerData: {name: 'headerData'}
};
},
};
</script>
- main.vue
<div>
<my-component>
<template v-slot:header="slotProps"> // 获取到子组件的数据
{{slotProps.data.name}} // 这就是数据
</template>
</my-component>
</div>
注意:父组件在使用子组件的时候 插槽和具名插槽不能嵌套,这样会导致作用域不明确
插槽数据工作原理
实际上就是利用回调函数的机制
function (slotProps) {
// 插槽内容. 数据就是传递的参数罢了 普通函数 利用回调函数的机制 这样的话还可以对 slotProps进行解构 (有点东西啊,卧槽)
}
// 看看人家的写法。有点想放弃react的冲动
<current-user v-slot="{ user = { firstName: 'Guest' } }">
{{ user.firstName }}
</current-user>
插槽搞完了,快去看我别的文章吧!
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- CentOS6.5安装Java 8以及Tomcat8
- Java基础06 组合
- 警告:MySQL-server-5.6.21-1.linux2.6.x86_64.rpm: 头V3 DSA/SHA1 Signature, 密钥 ID 5072e1f5: NOKEY
- MySQL(五)之DDL(数据定义语言)与六大约束
- Java基础08 继承
- 关于python字典类型最疯狂的表达方式
- centos6.5使用yum安装mysql
- Java基础09 类数据与类方法
- MySQL(四)之MySQL数据类型
- JS魔法堂:ASI(自动分号插入机制)和前置分号
- Java基础05 实施接口
- JS魔法堂:函数节流(throttle)与函数去抖(debounce)
- mysql用户管理
- Java基础10 接口的继承与抽象类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CSS让Li标签溢出后自动换行
- docker里运行docker命令
- 一次性实战java8 新特性(全)—— Lambda、Optional、stream、DateTime
- 面试Python高频问题汇总
- python自学成才之路 miniconda创建虚拟环境
- 逐行阅读Spring5.X源码(一) BeanDefinition,起点
- linux 磁盘占满 查看占用
- 逐行阅读Spring5.X源码(二) BeanDefinition的父接口-AttributeAccessor 、BeanMetadataElement ,进阶
- 64. Vue中的插槽slot
- 65. Vue中的作用域插槽
- SpringBoot : 全局异常配置
- springboot事务管理
- Java : 分享一个通用的获取请求客户端IP的方法
- 一套常用的css初始化样式
- Octave 笔记