1.组件间的通信4:slot(slot:插槽,就是一个占位)

slot用于标签反复使用很多次

1.1理解

此方式用于父组件向子组件传递标签数据, 其他为数据通信

外面组件向里面组件传递标签进去,直接拿我的标签显示数据就行

假如我传递的是数据,我还得映射成标签,才能显示数据

1.2子组件Child.vue

1.3父组件:Parent.vue

注意底下这两个<div>与上面的<slot>是对应关系

=================================================================================================================================

同一个组件,写了两个标签

我设计组件的时候，设计几个占位，占位本身并不显示东西，需要写入东西才会显示

===================================================================================================================================

1.设计3个插槽

本质来说当前实例完全没必要使用slot，因为就一个条

页面截图:

现在想给某一个插槽指定一个标签

怎样标明<input>是交给第一个插槽呢,<input >标签内指定slot="checkAll"

显示结果

把所有相关的东西都定义到了父组件

页面显示

(尚033)Vue_案例_slot(组件间的通信4:slot)的更多相关文章

  1. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. ZeroMQ(java)之I/O线程的实现与组件间的通信

    算是开始读ZeroMQ(java)的代码实现了吧,现在有了一个大体的了解,看起来实现是比较的干净的,抽象什么的不算复杂... 这里先来看看它的I/O线程的实现吧,顺带看看是如何实现组件的通信的.... ...

  3. vuejs单一事件管理组件间的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. React中父子组件间的通信问题

    1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)

  5. Vue2不使用Vuex如何实现兄弟组件间的通信

    在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...

  6. angular组件间的通信（父子、不同组件的数据、方法的传递和调用）

    angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...

  7. (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))

    组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...

  8. 原创-angularjs2不同组件间的通信

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...

  9. React数据流和组件间的通信总结

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

随机推荐

  1. GoldenDict（for Linux）配置无道词典

    引言 我原来写过一篇博客:(离线)英语词典软件推荐,个人比较喜欢的就是GoldenDict词典.不仅仅是因为它是免费开源的多平台程序,更重要的是支持丰富的原版词典(下文给出了下载链接).本文主要针对其 ...

  2. 用Python程序温度转换实例

    实例:温度转换 (1)分析问题:利用程序进行温度转换,由用户输入温度值,程序给出输出结果:通过语音识别,图像识别等方法自动监听并获得温度信息发布渠道(如收音机.电视机)给出的温度播报源数据,再由程序装 ...

  3. docker compose项目

    本文参考: https://www.cnblogs.com/jmcui/p/9395375.html https://www.cnblogs.com/jmcui/p/9512795.html 1.Do ...

  4. Java自学-日期 Date

    Java的日期类Date Date类 注意:是java.util.Date; 而非 java.sql.Date,此类是给数据库访问的时候使用的 示例 1 : 时间原点概念 所有的数据类型,无论是整数, ...

  5. Django---简易图书管理系统(B/S架构)

    Django---简易图书管理系统 一丶配置 创建app01 # 1.在具有manage.py文件的目录下,启动cmd,创建一个新的app01 python manage.py startapp ap ...

  6. VUE组件3 数据流和.sync修饰符

    单向数据流:数据通过prop从父组件传递到子组件中,当父级组件中的数据更新时,传子组件也会更新,但不能在子组件中修改.防止子组件在无意中修改,改变父级组件状态 然而,双向数据绑定在某些情况下有用.如果 ...

  7. 面试题：什么叫B*树

    B*-tree是B+-tree的变体,在B+树的基础上(所有的叶子结点中包含了全部关键字的信息,及指向含有这些关键字记录的指针),B*树中非根和非叶子结点再增加指向兄弟的指针:

  8. adb shell get/setprop, setenforce...

    adb shell getprop <key> 获取设备参数信息adb shell setprop <key> <value> 设置设备参数信息 例子1:>C ...

  9. 最强在线文件格式转换（支持200+文件格式如常用的PDF，DOCX，JPG,GIF,MP3，MP4，FLV,MOBI）（通用）

    网站展示:http://www.alltoall.net/ 分类简洁 支持的所有文件格式展示: 单独展示文档转换: 单独展示PDF转换:

  10. php mysql 按照指定年月查找数据 数据库create_time为时间戳

    $moneyloglist = MoneyLog::where(['user_id' => $this->auth->id]) ->where($where) ->whe ...