vue.js的插槽 - slot 是啥?要我说,它就是个“形参”
时间:2022-04-27
本文章向大家介绍vue.js的插槽 - slot 是啥?要我说,它就是个“形参”,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
slot应该是属于vue的模板语法的一部分,只不过它更灵活。看网上各种教程,好像对它各种不太理解。从模板的角度来讲,一个静态的东西被搞成了“动态”的感觉,那么就不能以模板这种静态的视角去看待它了。
////////
slot这个东西,就类似于函数的“形参”。调用函数的时候,你向函数中传入什么,函数的形参就代表什么。
function objfn( n ){
for(var i in n){
this[i] = n[i]
}
console.log(this)
}
objfn({
aaa:1,
bbb:2,
ccc:3
});
此时,objfn的this已经被添加了aaa,bbb,ccc
////////
slot也是一样,你需要在父容器中的子容器里显示什么,就在父容器中定义“什么”,然后slot就是“什么”。
<template>
<button>
<slot></slot>
</button>
</template>
<v-button>我是老尚</v-button>
可以认为,此时<slot></slot>这个形参,接收的值就是'我是老尚'。这种情况下,<button>就成了一个函数了。
当然,你也可以认为slot是一个“占位符”之类的,不传就不显示,传什么就显示什么。
////////
我个人主观觉得,slot就是把模板中定义的父组件,当成一个函数来看待了。有点函数式编程的意思。
至于slot其它的定义我就不写了,有兴趣的同学可以自行百度。
如果有同学有其它看法,欢迎留言。
- 颁奖乌龙就算了,怎么还性别歧视,好莱坞电影怎么了?数据笑而不语
- Python中关于集合(set)的思考
- 构建属于自己的原生docker images
- Docker-client for python使用指南
- Ansible基本配置以及使用示例
- redis超时原因系统性排查
- overlayfs存储驱动的使用以及技术探究
- 分页解决方案 之 分页算法——Pager_SQL的详细使用方法和注意事项
- 利用虚拟硬盘(把内存当作硬盘)来提高数据库的效率(目前只针对SQL Server 2000)可以提高很多
- 分页解决方案 之 分页算法——Pager_SQL的思路和使用方法
- 让你的笔记本更快一点——我的笔记本的性能测试和虚拟硬盘(把内存当成硬盘)的使用感觉
- 分页解决方案 之 数据访问函数库——另类的思路、另类的写法,造就了不一样的发展道路。
- 分页解决方案 之 QuickPager的使用方法(在UserControl里面使用分页控件的方法)
- 分页解决方案 之 QuickPager的使用方法(URL分页、自动获取数据)
- 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 数组属性和方法
- 基于TypeScript封装Axios笔记(六)
- 蓝桥杯 k好数 java版
- 强烈推介的几个微信小程序开发小技巧,简单又实用
- 【pytorch-ssd目标检测】验证自己创建的数据集
- django-模板之自动转义autoescape(八)
- 【pytorch-ssd目标检测】测试自己创建的数据集
- 【pytorch-ssd目标检测】训练自己创建的数据集
- SwiftUI:更高级的 MKMapView
- spring AOP之重用切点表达式
- springmvc之处理模型数据SessionAttributes注解
- Spring BeanUtils属性copy
- 【pytorch-ssd目标检测】制作类似pascal voc格式的目标检测数据集
- 【pytorch-ssd目标检测】可视化检测结果
- 文件I/O
- 【python-leetcode856-子集】括号的分数