插槽的使用

父组件向子组件传递DOM

不具名插槽,如下:

  父组件的内容如下:

1 <template>
2   <div id="app">
3     <home>
4       <p>hello lanyb</p> //父组件往子组件中插入的内容
5     </home>
6   </div>
7 </template>

  子组件中的内容如下:

1 <template>
2   <div>
3     hello world
4     <slot></slot> //父组件要插入的内容将插入在此处
5   </div>
6 </template>

输出结果为:

hello worldhello lanyb

以上就是最简单的slot示例。

然后还有具名插槽,如下:

  父组件中的内容,如下:

1 <template>
2   <div id="app">
3     <home>
4       <p slot="header">hello lanyb</p> //定义两个具名插槽
5       <p slot="ender">hello world</p> //定义两个具名插槽
6     </home>
7   </div>
8 </template>

  子组件中的内容,如下:

1 <template>
2   <div>
3     <slot name="ender"></slot> //名字叫ender的插槽中的内容会插入至此
4     我是分割线
5     <slot name="header"></slot> //名字叫header的插槽中的内容会插入到此
6   </div>
7 </template>

显示结果为:

hello world我是分割线hello lanyb

【注意:不具名插槽只有1个,具名插槽具有多个】

原文地址:https://www.cnblogs.com/lanyb009/p/9235985.html

时间: 2024-11-08 03:23:45

插槽的使用的相关文章

redis之(十八)redis的支持水平扩容的集群特性,以及插槽的相关操作

[一]主从集群的缺点,客户端分片的缺点 (1)主从+哨兵的redis集群,只是做主从备份,数据冗余的一种处理.但在存储空间的扩展上还是有限制.因为集群中的节点都是存储同样的数据.单一节点的容量,就可以决定整个集群存储数据的容量.木桶效应. (2)客户端规划的分片(就是将不同的键存储在不同的节点上),包括客户端预分片技术,解决了存储容量的不受单台最小存储节点的限制,但在集群节点新加入和节点下线上,就会造成数据的命中率不高,需要人工手动重新规划,数据转移. [二]redis3.0版本支持集群(包括存

使用slot分发内容 作用域插槽

除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会别丢弃.当子组件模板只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在的DOM位置,并替换掉slot标签本身. 最初在 <slot> 标签中的任何内容都被视为备用内容.备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容. 作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素. 在子组件中,只需将数据传递到插槽,就像你将 prop

vue2.1.x 新增作用域插槽

1.定义: 作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)到可重用模板替换已渲染元素. 在子组件中,只需将数据传递到插槽,就像你将props传递给组件一样. 注:在父级中,具有特殊属性scope的<template>元素,表示他是作用域插槽的模板.scope的值对应一个临时变量名,此变量接收从子组件中传递的prop对象: 实例如下: 实例的输出结果为: 2.作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项: 输出结果为: 其实质是在不同的作用域内进行传

Linux查看内存大小和插槽

前言 相信大家更换自己笔记本电脑的内存时一定是得心应手,即便是一名新手也可以很轻松的动手实现,其实服务器的内存更换也很简单,关机->挪盖->按指定顺序插拔.不过这里有一个很重要的共性前提,需要清楚了解当前硬件所匹配的内存大小型号和插槽数量等依赖关系,这样我们在更换内存时才会更加游刃有余哈. 更换内存前会用到的实用小技巧 更新历史 2015年06月05日 - 初稿 阅读原文 - http://wsgzao.github.io/post/linux-memory/ 扩展阅读 MacBook Pro

关于主板上的插槽

PCI插槽 基于PCI局部总线的扩展插槽 颜色一般为乳白色 位于主板AGP插槽的下方,ISA插槽的上方 位宽32bit或64bit,工作频率多为33MHz 可插接显卡.声卡.网卡.内置Modem,USB2.0卡 是主板的主要扩展插槽,通过插接不同的扩展卡可以获得电脑能实现的几乎所有功能,是万用扩展插槽 发展过程 基本的33MHz是133MB/s带宽,对声卡,网卡等绰绰有余,但对显卡则无法满足其需求 即使是升级的66MHz的,同样无法满足显卡要求 Intel在2001年公布取代PCI总线的第三代I

Redis3.0集群crc16算法php客户端实现方法(php取得redis3.0集群中redis数据所在的redis分区插槽,并根据分区插槽取得分区所在redis服务器地址)

数据分区        Redis集群将数据分区后存储在多个节点上,即不同的分区存储在不同的节点上,每个节点可以存储多个分区.每个分区在Redis中也被称为"hash slot",Redis集群中总共规划了16384个分区. 例如:当集群中有3个节点时,节点A将包含0-5460分区,节点B将包含5461-10922分区,节点C将包含10923-16383分区. 每个key将会存储到一个唯一的分区中,每个分区其实就是一组key的集合,两者对应关系为:key的CRC16校验码%16384=

vue 插槽slot

本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 注意两点: <app> 组件不知道它会收到什么内容.这是由使用 <app> 的父组件决定的. <app>

图片解说看个透 教你认识主板上的插槽

1啥都不懂从这节课开始 对于刚刚接触以及那些正准备要接触PC DIY的用户来说,能够认清那"纷乱复杂"的各种硬件及配件已经非常不易了.然而好不容易认清了这些硬件后,新手们就不得不面临一个非常"严肃"的问题,那就是装机. 这么多硬件及配件,到底怎么安插才能组装成一台完整的主机?什么都不知道的各位,我们可以从这一讲开始. 众所周知,电脑中的每一个部件都拥有自己的归属并发挥着自己的作用,然而每一款硬件和配件都与一样硬件发生了关系,它就是主板.没错,CPU需要安装在主板上,

Vue-渲染函数-插槽

先看个插槽的例子: <div id="app"> <child > <span slot-scope="props"> {{props.text}} </span> </child> </div> window.onload = function() { Vue.component('child', { template: ` <div> <slot text="he

slot插槽(学习笔记)

slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框对组件进行内容的定制,slot插槽,一对组件标签中的结构,最终会被插入到组件的模板中去的使用方法思路:子组件定义完成.需要灵活的改变子组件里面的东西.可以在子组件注册的标签里面写<slot></slot>来完成内容替换,当然有name来进行标识是最好的 案例: <!DOCTYPE html> <html lang=