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. 零基础学Python：元组（Tuple)详细教程

    Python的元组与列表类似,不同之处在于元组的元素不能修改,元组使用小括号,列表使用方括号,元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可https://jq.qq.com/?_wv=1 ...

  2. Codeforces Round #783 (Div. 2)

    A. Direction Change 题意 从(1,1)点出发到(n,m),每次可以向上下左右四个方向移动,但是不能与上次移动方向相同 最少要移动多少不,如果不能到达输出 -1 思路 假设n< ...

  3. 发评测赢好礼 | Serverless 函数计算征集令

    随着云计算发展,云原生热度攀升,Serverless 架构崭露头角且发展势头迅猛.不仅被更多开发者所关注,市场占有率也逐年提高.阿里云函数计算(Function Compute)是一个事件驱动的全托管 ...

  4. 使用Tapdata一步搞定关系型数据库到MongoDB的战略迁移

      摘要:数据库作为最关键的基础设施,随着互联网时代的信息高速增长,关系型数据库因其高门槛.高成本以及扩展性差等原因导致的局限性逐渐浮出水面,如今更是面临诸多问题和挑战,Tapdata 专注新一代实时 ...

  5. Conversation Modeling on Reddit Using a Graph-Structured LSTM

    publish: Transactions of the Association for Computational Linguistics,2016 tasks:  predicting popul ...

  6. Tomcat 安装及配置，创建动态的web工程

    Tomcat可以认为是对Servlet标准的实现,是一个具体的Servlet容器. 1)        将Tomcat的安装包解压到磁盘的任意位(非中文无空格) 2)        Tomcat服务的 ...

  7. 静态static关键字概述和静态static关键字修饰成员变量

    static关键字 概述 关于 static 关键字的使用,它可以用来修饰的成员变量和成员方法,被修饰的成员是属于类的,而不是单单是属 于某个对象的.也就是说,既然属于类,就可以不靠创建对象来调用了 ...

  8. SQL Server 中的 ACID 属性

    SQL Server 中的事务是什么? SQL Server 中的事务是一组被视为一个单元的 SQL 语句,它们按照"做所有事或不做任何事"的原则执行,成功的事务必须通过 ACID ...

  9. Root用户无法使用Tab补齐解决

    1. sudo vim /etc/bash.bashrc 2.取消以下注释 #if [ -f /etc/bash_completion ]; then # . /etc/bash_completion ...

  10. idea 内置tomcat jersey 上传文件报403错误

    Request processing failed; nested exception is com.sun.jersey.api.client.UniformInterfaceException: ...