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

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

vue中的slot理解和使用的更多相关文章

  1. vue中的slot与slot-scope

    深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解

  2. Vue中的slot(占坑,预留位置)

    Vue中的slot(占坑,预留位置) 子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> ...

  3. vue中keepalive怎么理解?​---vue中文社区

    vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...

  4. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  5. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  6. 深入理解vue中的slot与slot-scope

    from:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练 ...

  7. vue 中的slot属性(插槽)的使用

    总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...

  8. vue中的slot(插槽)

    vue中的插槽----slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. ...

  9. vue中nextTick的理解

    A. vue 中的 nextTick 是什么? 1.首先需要清楚,nextTick是一个函数:这个函数的作用,简单理解就是下一次渲染后才执行 nextTick 函数中的操作: 2.在下一次 DOM 更 ...

随机推荐

  1. zoj 1648 Circuit Board

    题目:意思就是推断给定的几条线段是否有相交的. 方法:模版吧,有空在来细细学习. 代码: #include <iostream> #include <cstdio> using ...

  2. android測试工具MonkeyRunner--google官网翻译

    近期在复习之前的笔记,在回想MonkeyRunner时看了看google官网的内容,写得不错.就翻译出来分享下.事实上google官网真是一个学习的好地方. 基础知识 MonkeyRunner工具提供 ...

  3. ios 使用Starscream实现websocket简单例子

    调试了半天,出现 websocket is disconnected: Invalid HTTP upgrade 的错误 居然是 URL 地址写错了的原因,端口号之后还有一堆地址没有写上. 另外wss ...

  4. C++第11周(春)项目3 - 点类派生直线类

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759.内有完整教学方案及资源链接 [项目3 - 点类派生直线类]定义点类Poin ...

  5. 一句话实现Mysql查询结果带行号

    SELECT @rowno:=@rowno + 1 AS rowno,a.* FROM tableName a,(SELECT @rowno:=0) b

  6. C++重载运算符简单总结

    当运算符作用于类类型的运算对象时,可以通过运算符重载重新定义该运算符的含义.明智的使用运算符重载能令我们的程序更易于编写和阅读. 一.基本概念 什么是运算符重载?重载的运算符是具有特殊名字的函数:它们 ...

  7. C# Interactive Walkthrough

    C# Interactive Walkthrough

  8. SQL 优化记录

    1. 对Where 语句的法则 1.1 避免在WHERE子句中使用in,not  in,or 或者having. 可以使用 exist 和not exist代替 in和not in. 可以使用表链接代 ...

  9. (Go)07.Go语言中strings和strconv包示例代码详解02

    1.strings使用 统计字符串出现次数 strings.Count(s string, substr string) int Count 用于计算字符串 substr 在字符串 s 中出现的非重叠 ...

  10. Websocket实现前后台通信,demo小测试

    新需求大概如下:用户登录系统,登录成功之后建立websocket连接,实现通信 总体思路:前端不是我负责,只是简单的做个功能,先实现登录,把用户标识存入HttpSeesion,再建立websocket ...