1.什么是插槽?

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，

父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签

2.其作用?

感觉是为了使插入更加灵活,用于实现一些特定的功能.

3.props是什么?

也就是props是子组件访问父组件数据的唯一接口。

详细一点解释就是：

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。

父组件的数据需要通过 prop 才能下发到子组件中。

一个组件可以直接在模板里面渲染data里面的数据（双大括号）。

子组件不能直接在模板里面渲染父元素的数据。

如果子组件想要引用父元素的数据，那么就在prop里面声明一个变量（比如a），这个变量就可以引用父元素的数据。

然后在模板里渲染这个变量（前面的a），这时候渲染出来的就是父元素里面的数据。

我把他理解为父子间的接口

上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>


<!--view层，模板-->

<div id="vue">

    <todo>         //插槽绑定todo-titile, ":"冒号后面的是props的title ,这个是数据detitle;就能实现动态绑定然后输出"秦老师系列课程",这真是太麻烦了

        <todo-title slot="todo-title" :title="title"></todo-title>


        <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->

        <!--如下为简写-->

        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items

    </todo>

</div>


<!--1.导入Vue.js-->


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script type="text/javascript">

    Vue.component('todo',{　　　　　　　　　　　　//定义组件

        template:'<div>\

                <slot name="todo-title"></slot>\

                <ul>\

                    <slot name="todo-items"></slot>\

                </ul>\

            </div>'

    });


    Vue.component('todo-title',{

        props:['title'],　　　　　　//接口为title

        template:'<div>{{title}}</div>'

    });


    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！

 　　Vue.component("todo-items",{

        props:["item","index"],　　　//接口为item,index

        template:"<li>{{index+1}},{{item}}</li>"

    });


    var vm = new Vue({

        el:"#vue",

        data:{

            title:"秦老师系列课程",

            todoItems:['test1','test2','test3']　　　　//返回数据

        }

    });

</script>

</body>

</html>

第二十二篇:有关插槽solt的使用的更多相关文章

  1. Python开发【第二十二篇】：Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

  2. 第二十二篇、IO多路复用 一

    一.简介io多路复用 可以监听多个文件描述符(socket对象)(文件句柄),一旦文件句柄出现变化,就会感知到 Linux中的 select,poll,epoll(内核2.6以上) 都是IO多路复用的 ...

  3. Python之路【第二十二篇】CMDB项目

    浅谈ITIL TIL即IT基础架构库(Information Technology Infrastructure Library, ITIL,信息技术基础架构库)由英国政府部门CCTA(Central ...

  4. Python之路【第二十二篇】：Django之Model操作

    Django之Model操作   一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bi ...

  5. Python之路(第二十二篇) 面向对象初级：概念、类属性

    一.面向对象概念 1. "面向对象(OOP)"是什么? 简单点说,“面向对象”是一种编程范式,而编程范式是按照不同的编程特点总结出来的编程方式.俗话说,条条大路通罗马,也就说我们使 ...

  6. flask第二十二篇——模板【4】过滤器

    请关注微信公众号:自动化测试实战 先来教大家一个pycharm设置默认模板的方法.我们每次新建模板或者平时写代码打开以后可能都要重复写# coding: utf-8这些代码,其实我们可以设置好模板,让 ...

  7. 【Python之路】第二十二篇--Django【基础篇】

    1 Django流程介绍 MTV模式       著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业 ...

  8. SpringBoot非官方教程 | 第二十二篇： 创建含有多module的springboot工程

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springbot22-modules/ 本文出自方志朋的博客 这篇文 ...

  9. 第二十二篇 正在表达式 re模块

    re模块****** 就本质而言,正则表达式时一种小型的,高度专业化的编程语言,在python里,它内嵌在python中,并通过re模块实现.正则表达式模式被编译成一系列的字节码.然后用C编写的匹配引 ...

随机推荐

  1. 基于bat脚本的前端发布流程的优化

    背景介绍 前面在基于bat脚本的前端发布流程设计与实现中,我已经介绍了设计与实现,这一篇主要是针对其的一个优化折腾(分两步走,第一步先搞出来,第二步再想着怎么去优化它),我主要做了以下几件事. &qu ...

  2. FS2K人脸素描属性识别

    人脸素描属性识别 代码:https://github.com/linkcao/FS2K_extract 问题分析 需要根据FS2K数据集进行训练和测试,实现输入一张图片,输出该图片的属性特征信息,提取 ...

  3. 分布式事务(Seata) 四大模式详解

    前言 在上一节中我们讲解了,关于分布式事务和seata的基本介绍和使用,感兴趣的小伙伴可以回顾一下<别再说你不知道分布式事务了!> 最后小农也说了,下期会带给大家关于Seata中关于sea ...

  4. pytest多进程/多线程执行测试用例

    前言: 实际项目中的用例数量会非常多,几百上千:如果采用单进程串行执行的话会非常耗费时间.假设每条用例耗时2s,1000条就需要2000s $\approx$ 33min:还要加上用例加载.测试前/后 ...

  5. CF1656E Equal Tree Sums 题解

    题目链接 思路分析 自认为是一道很好的构造题,但是我并不会做. 看了题解后有一些理解,在这里再梳理一遍巧妙的思路. 我们先来看这样的一张图: 我们发现当去掉叶子节点的父亲时,剩下树的价值和等于叶子节点 ...

  6. OneOS家族，LITE版小兄弟诞生了！

    号外,号外!OneOS-Lite诞生啦!前有大哥OneOS,以及一众优秀的RTOS,正所谓珠玉在前,我很难啊.但我可不能怂,大哥叫小O,我就叫小L,站在大哥的肩上,小小L也有发光发热的机会. 小L代码 ...

  7. 无用的IP黑名单

    无效的IP黑名单,有些还没有收集,在阿里云或者腾讯云的安全组里面设置,拦截不必要的IP,免得遭到攻击,也避免的CPU和内存过高 来源 备注82.102.21.217 拒绝 随机访问目录攻击,频繁69. ...

  8. 【C语言】超详讲解☀️指针是个什么针？（一次性搞定指针问题）

    目录 前言 一. 什么是指针? 引例 计算机是怎么对内存单元编号的呢? 内存空间的地址如何得到 想存地址怎么办? ​ 本质目的不是为了存地址 二.指针和指针类型 为什么有不同类型的指针 1.指针的解引 ...

  9. 转换流的原理和OutputStreamWriter介绍&代码实现

    转换流的原理 OutputStreamWriter介绍&代码实现 package com.yang.Test.ReverseStream; import java.io.FileNotFoun ...

  10. JavaWeb--HTTP与Maven

    前言 Java Web 其实就是一个技术的总和,把Web看成一个容器而已主要使用JavaEE技术来实现.在加上各种中间件. 整个javaWeb阶段的内容通过实际的案例贯穿学习, 所涉及到的技术知识点会 ...