最近被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. 游戏人生(一),我的lua之旅:那些坑爹的CCBReaderLoad

    首先,我们说说这个CCBReaderLoad. 这个脚本是cocos2dx自带的一个lua+cocosbuilder 的工具,详细功能呐,往下看. 先来看下我遇到的一个问题: ----美工给了我一个. ...

  2. Android实战简易教程-第二十四枪(基于Baas的用户表查询功能实现!)

    接着上一篇,我们注冊了几个用户,用户表例如以下: 以下我们用ListView将表中数据显示出来吧. 首先看一下main.xml: <RelativeLayout xmlns:android=&q ...

  3. 【 D3.js 进阶系列 — 2.2 】 力学图的參数

    力学图的布局中有非常多參数.本文将逐个说明. D3 中的力学图布局是使用韦尔莱积分法计算的.这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中. 定义布局的代码例如以下: ...

  4. Python3.4 远程操控电脑(开关机)

    import poplib import sys import smtplib from email.mime.text import MIMEText import os from email.he ...

  5. C++著名程序库的比较

    转载出处:http://www.acejoy.com/ace/thread-3777-1-1.html 1.C++各大有名库的介绍——C++标准库 2.C++各大有名库的介绍——准标准库Boost3. ...

  6. visual studio2013 C++查看对象布局

    一在visual studio中进行设置,可以方便的查看对象的内存布局 右键所要显示的*.cpp >> 属性 >> 命令行 >> 其它选项 在其他选项中添加: /d ...

  7. warning: here-document at line 7 delimited by end-of-file (wanted `rui')

  8. TP5.x——聊天列表查询

    前言 查询聊天列表,并返回最后一条聊天记录.这个有一个比较尴尬的点就是,一个是你主动发出的,一个是你接收的. 所以这个SQL会比较长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长 ...

  9. HTML+CSS+JS总结

    ==================HTML(超文本标记语言)========== <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告 ...

  10. ReferenceEquals()、static Equals() 、instance Equals() 与 operator==之间的联系与区别

    当你创建一个用户自定义类型(类或结构)时,你需要给你的类型定义相等操作.C#中提供了几个不同的函数来验证两个对象是否满足“相等”的含义.public static bool ReferenceEqua ...