对于插槽的概念和使用,这是vue的一个难点,这需要我们静下心来,慢慢研究。以下是我这两天通过官网和其他资料的学习和使用总结出来的笔记,如有错误或者有不同见解的,欢迎留言,一起学习。

什么是插槽?

插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。

如下代码:

1. 在子组件中放一个占位符

2. 在父组件中给这个占位符填充内容:

3. 展示的效果

现在来看看,如果子组件中没有放插槽,同样的父组件中在子组件中填充内容,会是啥样的:

1. 子组件代码无插槽:

2. 父组件照常填充内容:

3. 展示的效果:

总结:如果子组件没有使用插槽,父组件如果需要往子组件中填充模板或者html, 是没法做到的

插槽的使用

插槽的最最简单使用,上面已有例子,这里就不写了,接下来看看,插槽其他使用场景

插槽的使用 - 具名插槽

描述:具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。

如下代码:

1. 子组件的代码,设置了两个插槽(header和footer):

2. 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

3.展示的效果:

接下来再来看看,父组件中填充内容的时候,顺序调换下,看下能不能内容能不能对应上:

1. 子组件代码不变,父组件代码中填充顺序调换下(如图,在父组件中,footer 和 header 的填充位置对换):

2. 展示的效果:

  由此看出,即使父组件对插槽的填充的顺序打乱,只要名字对应上了,就可以正确渲染到对应的插槽中。即: 父组件填充内容时,是可以根据这个名字把内容填充到对应插槽中的

插槽的使用 - 默认插槽

描述: 默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父级将会把 未指定插槽的填充的内容填充到默认插槽中。

示例代码如下:
1.子组件代码定义了一个默认插槽:

  2.父组件给默认插槽填充内容:

  

  3. 展现的内容

  

注意:

1.  父级的填充内容如果指定到子组件的没有对应名字插槽,那么该内容不会被填充到默认插槽中。

2.  如果子组件没有默认插槽,而父级的填充内容指定到默认插槽中,那么该内容就“不会”填充到子组件的任何一个插槽中。

3.  如果子组件有多个默认插槽,而父组件所有指定到默认插槽的填充内容,将“” “全都”填充到子组件的每个默认插槽中。

  

  插槽的使用 - 作用域插槽

    作用域插槽的概念和使用比较难于理解,通过查看多方资料,做了以下的总结:

描述:作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
使用方法:

    1. 子组件存放一个带数据的插槽: mylist和title是子组件传给父组件的参数

    2. 父组件通过 “slot-scope” 来接收子组件传过来的插槽数据,再根据插槽数据来填充插槽的内容

    3. 展现的效果:

    4. 常用场景(以下为常用的情况之一)
      如果子组件中的某一部分的数据,每个父组件都会有自己的一套对该数据的不同的呈现方式,这时就需要用到作用域插槽。

vue_插槽的理解和使用的更多相关文章

  1. Vue插槽slot理解与初体验 ~

    一.插槽的理解 1.官网介绍 Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口. 2.为什么使用插槽 Vue 中有一个重要的概念-组件,可以在开发中将子组 ...

  2. vue中的插槽slot理解

    本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; v ...

  3. Vue插槽的深入理解和应用

    一开始接触vue时并不知道插槽是什么,后来看了很多文章也是一知半解.然后自己手动敲了一下,在项目中实际应用一下,实在太好用了.后来做小程序后发现也能使用slot,不单单在vue中使用.我就是这么目光短 ...

  4. [译] 我最终是怎么玩转了 Vue 的作用域插槽

    原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...

  5. vue-组件化-插槽(slot)

    理解 Vue组件化中,当我们在设计一个组件的时候,可能会保留一部分,让使用者自定义的内容,比如: 导航栏组件中,右上角的分享按钮,左上角做菜单按钮 弹出框组件中,弹出框的提示内容等 ... 在这种场景 ...

  6. 22. VUE 插槽-详解

    插槽 一直对插槽不理解,今天学习,并整理一下,希望日后可以灵活运用. (一)插槽内容 先简单来个例子,看一下插槽的租作用. 1.1 不使用插槽 父组件中: <div id="app&q ...

  7. vue基础-组件&插槽

    组件 组件化的意义:封装(复用,把逻辑隐藏起来,提高可维护性),快速开发(搭积木) 约定:我们通常把那些除了HTML标签以外的自定义组件,才称为'组件',结论是,我们说"父组件"& ...

  8. 通过UI库深入了解Vue的插槽的使用技巧

    Vue官网对于插槽的介绍比较简略,插槽本身也比较"烧脑",很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽. 其实我们可以换一个角度来理解插槽,就会豁然 ...

  9. laravel Blade 模板引擎

    与视图文件紧密关联的就是模板代码,我们在视图文件中通过模板代码和 HTML 代码结合实现视图的渲染.和很多其他后端语言不同,PHP 本身就可以当做模板语言来使用,但是这种方式有很多缺点,比如安全上的隐 ...

随机推荐

  1. git : error occurred during unpacking on the remote end: unpack-objects abnormal exit

    error occurred during unpacking on the remote end: unpack-objects abnormal exit git服务器磁盘满了.

  2. PAT 甲级 1079 Total Sales of Supply Chain (25 分)(简单,不建树,bfs即可)

    1079 Total Sales of Supply Chain (25 分)   A supply chain is a network of retailers(零售商), distributor ...

  3. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(六)- webpack-dev-server 自适应支持手机端访问

    关于EasyDSS EasyDSS商用流媒体服务器解决方案是一套集流媒体点播.转码与管理.直播.录像.检索.时移回看于一体的一套完整的商用流媒体服务器解决方案,EasyDSS高性能RTMP流媒体服务器 ...

  4. CDH集群手动导入scm库

    一.手动导入 scm 库 背景:正常安装 cloudera-scm-server 时,安装 scm 库是通过脚本 /usr/share/cmf/schema/scm_prepare_database. ...

  5. LODOP条码二维码简短问答及相关博文

    LODOP如何输出条码 条码输出 参考样例11 http://www.c-lodop.com/demolist/PrintSample11.html超文本表格中的条码参考样例47 http://www ...

  6. 手机端rem无限适配

    参考文档: http://blog.csdn.net/xwqqq/article/details/54862279 https://github.com/amfe/lib-flexible/tree/ ...

  7. Redis哨兵(Sentinel)模式

    Redis哨兵(Sentinel)模式   主从切换技术的方法是:当主服务器宕机后,需要手动把一台从服务器切换为主服务器,这就需要人工干预,费事费力,还会造成一段时间内服务不可用.这不是一种推荐的方式 ...

  8. 配置tomcat 加载指定的jar

    # vi bin/catalina.sh

  9. 在ensp上配置Trunk接口

    什么是Trunk接口? 在以太网中,通过划分 VLAN 来隔离广播域和增强网络通信的安全性.以太网通常由多台交换机组成,为了使 VLAN 的数据帧跨越多台交换机传递,交换机之间互连的链路需要设置为干道 ...

  10. 小白都能看懂的vue中各种通信传值方式,附带详细代码

    1.路由通信传值 路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段. 例子: 创建并在路由注册一个组件Head <template> <div id=&quo ...