vue中的slot理解和使用
2024-08-24 17:23:14
最近被vue 搞得一塌糊涂，理解的比较慢，工作进度进度要求太快，需求理解不明，造成了很大的压力。
在理解Vue中的Slot的时候看了网上的相关内容，看了半天没看到明白说的是什么，然后自己就安装了vue的相关环境，创建了一个项目，实际动手看看是什么东西，
现理解为： 用父组件的内容去替换掉子组件的内容；
根据父组件中的
<div slot="slot1">slottest</div>
如果引入的子组件中有
<slot name="slot1">123432<slot>
那么子组件的123432 将会被不显示，而是被替换为slottest;
在项目的实际应用如：假设我们的项目中有个搜索组件，其中搜索组件为：
用户的姓名，性别，电话号码： 该组件定义为组件1
组件1 可以被所有的页面所采用，但是在有些页面则会需要 添加一项：比如根据邮箱查询：
我们是重新写一个新的组件，还是通过修改我们写好的组件方便呢：
改造如下：在子组件中添加一个标签<slot name="othercondition"></div>
子啊父组件中：我们可以添加如下的代码：
<div slot="othercondition">
<label>邮箱<label><input type="Email">
</div>
这样改造的话，我们不需要重新新增一个项目文件，只需要在引用的父组件中添加几行代码就行了，这样就减少了代码量，同时方便插件的扩展；
最新文章
- linux shell basic command
- 使用Python对文档单词进行计数
- android support的作用及其常见错误的解决
- asp.net 后台 Http POST请求
- ruby -- 问题解决（七）ActionController::InvalidAuthenticityToken解决办法
- Netty中BIO,NIO
- JQuery源码分析（六）
- 你真的理解z-index吗？
- 什么是IntelAMT
- IIS MIME类型问题(html5 video 本地打开可以，IIS打开不了)
- 一个小程序，时间util
- JavaScript Array 技巧
- 最小覆盖_KEY
- qt调用simsimi api实现小黄鸡
- Powerdesigner+PostgreSQL
- dojo API中英文缩写的意思
- 接口测试工具-Jmeter使用笔记（八：模拟OAuth2.0协议简化模式的请求）
- LINUX 系统下部署 NFS服务
- hdu5646数学构造+二分
- rsync+inotify实现数据实时同步