vue中的slot理解和使用

Posted 2020-12-03 yanwuming

最近被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>

 这样改造的话，我们不需要重新新增一个项目文件，只需要在引用的父组件中添加几行代码就行了，这样就减少了代码量，同时方便插件的扩展；