1. 什么是插槽

　　插槽slot 是往父组件中插入额外内容，实现组件的复用，一个插槽插入到一个对应的标签中

2. 实例：

　　一个组件中不允许有两个匿名插槽

</head>

<body>

    <div id="root">

        <child>

            <div class="header" slot="header">header</div>

            <div class="footer" slot="footer">footer</div>

            hello     <！-- 没有名字的标签默认会放置到name:default的slot中 -->

        </child>

    </div>

<script>

    Vue.component('child',{

        template: `<div>

                        <slot name="header"></slot>   <!--  有名插槽 -->

                        <div class="content">content</div>

                        <slot name="footer"></slot>   <!--  有名插槽 -->

                        <slot>如果没有hello就显示slot的内容</slot>  <!--  匿名插槽   slot中可以设置默认内容，如果传递了内容则替换掉 -->

                   </div>`

    })

    var vm = new Vue({

        el: '#root'

    })

</script>

</body>

3. 作用域插槽

固定写法：父组件中<template slot-scope="props"></template>      //props可以自定义用来接收子组件的数据

<body>

    <div id="root">

        <child>

            <template slot-scope="props">

                <li>{{props.item2}}</li>   //接收子组件的item值

            </template>

        </child>

    </div>

<script>

    Vue.component('child',{

        data(){

            return{

                list:[1,2,3,4]

            }

        },

        template: `<div>

                        <ul>

                            <slot v-for="item of list" :item2="item"></slot>

                        </ul>

                   </div>`

    })

    var vm = new Vue({

        el: '#root'

    })

</script>

</body>

Vue插槽 slot的更多相关文章

  1. vue 插槽slot

    本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...

  2. 三、深入Vue组件——Vue插槽slot、动态组件

    一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...

  3. vue 插槽slot总结 slot看这篇就够了

    一直模糊所以梳理一下,看了好多篇园友的文章和官网文档在这整理一下 默认插槽 //slot组件<template> <div class="slots"> s ...

  4. vue插槽slot的理解与使用

    一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...

  5. vue 插槽 slot

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue 插槽 ------ slot 简单理解

    solt 插槽 内容分发 什么是插槽 Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口. 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就 ...

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

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

  8. Vue 插槽 slot的简单实用

  9. Vue插槽：（2.6.0以后版本弃用slot和slot-scope，改用v-slot)

    关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了 贴下原码: 具名插槽:v-slot:header Html: ...

随机推荐

  1. em和px区别

    附:(http://www.cnblogs.com/leejersey/p/3662612.html) em单位说明 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任 ...

  2. .NET开源工作流RoadFlow-表单设计-HTML编辑器

    roadflow目前采用的html编辑器为ueditor编辑器(和表单设计器的编辑器相同). 绑定字段:与数据表的某个字段对应. 宽度:编辑器的宽度. 高度:编辑器的高度. 运行效果如下:

  3. ArcMap没有工具条和菜单栏的解决方法

    问题: 在安装ArcGIS10后,打开竟然没有菜单栏和工具栏,安装10.1又有,卸了重装10还是没有 解决办法: 在ArcMap的状态栏上双击,在弹出的自定义对话框中,在Toolbars工具栏选择Ma ...

  4. gamemakerstudio:鼠标输入

    标准鼠标输入常量: mb_left 按下鼠标左键 mb_middle 按下鼠标中键 (这可能不是在所有目标平台上都有效) mb_right 按下鼠标右键 mb_none 没有按下任何鼠标键 mb_an ...

  5. 使用 yield生成迭代对象函数

    https://www.cnblogs.com/python-life/articles/4549996.html https://www.liaoxuefeng.com/wiki/001431608 ...

  6. （一）svn介绍

    项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易引发BUG 难于恢复至以前正确版本 ...

  7. SQLite的.NET应用自适应32位/64位系统 z

    如果一个.NET应用要自适应32位/64位系统,只需要在项目的“目标平台”设置为“Any CPU”.但是如果应用中使用了SQLite,情况就不同了. SQLite的.NET开发包来自是System.D ...

  8. 多设备同时安装apk（安卓）

    前几天在做安卓设备的多个设备同时安装的小脚本.因为目前我这边设备有点多,想顺便做一下安装的测试.而且因为公司的app测试人手上有点不足,就想通过这个办法去在安装的时候更方便省事一点. 本来是想弄个复杂 ...

  9. 如何批量删除Redis数据库中的Key

    借助 Linux 的 xargs 指令来完成 redis-cli keys "*" | xargs redis-cli del //如果redis-cli没有设置成系统变量,需要指 ...

  10. 如何清理Windows缩略图缓存？

    从Win95的IE4开始就有缩略图缓存了,缩略图缓存作用主要是用于存储Windows资源管理器缩略图图像文件.这加快了图像的显示速度,因为每次用户查看文件夹时都不需要重新生成这些较小的图像.缩略图缓存 ...