刚开始我们淡淡提过<slot></slot>现在深入了解一下。

slot可以进行父组件传值到子组件。

比如：我们将hiboy通过<slot>传递到组件中。

<body>

    <div id="app">

        <hello>

            Hi boy

        </hello>

    </div>

</body>

<script>

    Vue.component("hello",{

        data:function(){

            return {

                list:[1,2,3,4]

            }

        },

        template:'<p><slot></slot></p>'

    })

    var app=new Vue({

        el:'#app'

    })

</script>

结果：

当然这不是今天想要讲的。今天我们来分析两种情况。

一、多个插槽传递不同内容

这个时候我们需要设值的关键参数有： slot=' youngam'，name='young'   (youngam随便取的，前后一致即可)

例子：我们想要通过两个<slot>分别传递header和footer，<h3>content</h3>作为主要内容区，具体如下代码。

<body>

    <div id="app">

        <hello>

            <div>header</div>

            <div>footer</div>

        </hello>

    </div>

</body>

<script>

    Vue.component("hello",{

        template:`<div>

                    <slot></slot>

                    <h3>content</h3>

                    <slot></slot>

        </div>`

    })

    var app=new Vue({

        el:'#app'

    })

</script>

错误结果：

大家可以发现header和footer被当作一个插值进行了两次传递，这当然不是我们想要的。

解决方法：

通过定义slot的值 <div slot="header">header</div>

组件中<slot name="header"></slot>

这样在插值时就会找对应的slot进行。

修改后代码：

<body>

    <div id="app">

        <hello>

            <div slot="header">header</div><!--添加slot的值 -->

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

        </hello>

    </div>

</body>

<script>

    Vue.component("hello",{

        template:`<div>

                    <slot name="header"></slot>    //与上面值对应(运行时删除备注)

                    <h3>content</h3>

                    <slot name="footer"></slot>

        </div>`

    })

    var app=new Vue({

        el:'#app'

    })

</script>

二、作用域插槽（插槽Dom类型由父组件决定）

关键代码：slot-scope='变量名'

<template  slot-scope="youngam"></template>

例子：

现在我们的组件中有一个数组，通过v-for遍历到对应li标签中并实现显示。

代码：

<body>

    <div id="app">

        <hello>

        </hello>

    </div>

</body>

<script>

    Vue.component("hello",{

        data:function(){

            return {

                list:[1,2,3,4]

            }

        },

        template:`<div>

                    <ul>

                        <li v-for='item in list'>{{item}}</li>

                    </ul>

                  </div>`

    })

    var app=new Vue({

        el:'#app'

    })

</script>

结果：

好的，正确显示。

但是，此时的ul和li是固定在组件中的，我们想要通过父组件传递标签实现循环时所显示的是什么标签（此时显示的是<li></li>）

具体做法：将需要传递的标签外面套一层<template slot-scope="随便一个变量名"></template>标签

具体代码：

<body>

    <div id="app">

        <hello>

            <template  slot-scope="youngam">

                <h3>{{youngam.item}}</h3>

            </template>

        </hello>

    </div>

</body>

<script>

    Vue.component("hello",{

        data:function(){

            return {

                list:[1,2,3,4]

            }

        },

        template:`<div>

                    <ul>

                        <slot v-for='item in list' :item=item></slot>

                    </ul>

                  </div>`

    })

    var app=new Vue({

        el:'#app'

    })

</script>

这里将slot替换成了h3但数据是组件里的。通过  变量名.循环单个值  的形式可以获取到数据。

结果：

好了，具体类容还是看官方文档吧。

就是这样。

组件基础(插槽slot)—Vue学习笔记的更多相关文章

  1. 组件基础（参数校验和动态组件、v-once）—Vue学习笔记

    最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...

  2. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  3. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  4. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  5. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  6. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  7. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

随机推荐

  1. 2019.01.01洛谷 P4725/P4726 多项式对数/指数函数（牛顿迭代）

    4725传送门 4726传送门 解析 代码: #include<bits/stdc++.h> #define ri register int using namespace std; in ...

  2. 2018.11.07 NOIP模拟 数独（模拟）

    传送门 sbsbsb签到题. 读题时间比写题时间长系列. 写一个checkcheckcheck函数来检验当前时间段第(i,j)(i,j)(i,j)号格子能否放入kkk就行了. 代码

  3. 2018.11.02 洛谷P2661 信息传递（拓扑排序+搜索）

    传送门 按照题意模拟就行了. 先拓扑排序去掉不在环上面的点. 剩下的都是简单环了. 于是都dfsdfsdfs一遍求出最短的环就行. 代码: #include<bits/stdc++.h> ...

  4. jQuery 常用效果

    hide和show 同样有 fadeInhe fadeOut 的功能 $(document).ready(function(){ $("#hide").click(function ...

  5. ThinkPHP redirect 传参

    重定向带参 $this->redirect('pay/under_line_success',array('order_id'=>$stuInfo),5,'页面跳转中….'); 第一个参数 ...

  6. Win10通知区域图标设置；windows10系统图标合并；Windows10系统通知合并

    1.一直喜欢Windows7的通知图标合并 2.通过查阅找到方法 a.输入命令语句   win+R  :shell:::{05d7b0f4-2121-4eff-bf6b-ed3f69b894d9} 回 ...

  7. _编程语言_C++_宏定义#define 和 常量const 的区别

    C++中有两种定义常量的方式:#define预处理和const关键字 #define 预处理指令 #include <iostream> using namespace std; #def ...

  8. （暴力+优化）学渣的逆袭 -- zzuli -- 1785

    http://acm.zzuli.edu.cn/problem.php?id=1785 学渣的逆袭 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 82  ...

  9. Java读取修改Properties文件

    properties文件是我们经常需要操作一种文件,它使用一种键值对的形式来保存属性集. 无论在学习上还是工作上经常需要读取,修改,删除properties文件里面的属性. 本文通过操作一个prope ...

  10. js五道经典练习题--第一道

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