vue2.0 之 slot 内容分发
前提:父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。被分发的内容会在父作用域内编译。
一、单个插槽
// 子组件模板 child-component
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div> // 父组件模板:
// 父组件模板中的子组件child-component中的内容渲染到slot插槽中,
// 若插槽中原有默认内容,会替换掉;
// 若子组件child-component只有一个没有属性的插槽,则父组件中的所有传入内容将被渲染在此插槽处;
// 若一个插槽都没有,则父组件模版中的子组件child-component中的内容会被丢弃 <div>
<h1>我是父组件的标题</h1>
<child-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</child-component>
</div> // 渲染结果:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
二、具名插槽
<slot>
元素用属性 name
来进一步配置如何分发内容。具名插槽将匹配内容片段中有对应 slot
特性的元素。
仍然可以有一个匿名插槽,作为默认插槽,作为找不到匹配的内容片段的备用插槽。若无默认插槽,这些找不到匹配的内容片段将被抛弃
// 子组件模板:child-component
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot> //默认插槽
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div> // 父组件模板:
<div>
<h2>父组件模版标题</h2>
<child-component>
<h1 slot="header">这里可能是一个页面标题</h1>
// 为匹配到的内容,插入到默认插槽中
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p>
</child-component>
</div> // 渲染结果为:
<div>
<h2>父组件模版标题</h2>
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>
</div>
三、作用域插槽
v2.1.0
作用域插槽是一种特殊类型的插槽,能被传递数据。在子组件中,只需将数据传递到插槽,就可以像 props 一样传递数据。
// 子组件模板 child-component
<div class="child">
<slot text="msg from child"></slot>
</div>
在父级中,具有属性 slot-scope
的 <template>
元素必须存在,表示它是作用域插槽的模板。slot-scope
的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象:
// 父组件模板
<div class="parent">
<child-component>
<template slot-scope="props">
<span>msg from parent</span>
<span>{{ props.text }}</span>
</template>
</child-component>
</div> // 渲染成:
<div class="parent">
<div class="child">
<span>msg from parent</span>
<span>msg from child</span>
</div>
</div>
在组件开发中,Element-UI广泛使用
demo:
// 父组件模版
......其他模版代码
<list :data="listData" class="img-list">
<template scope="scope">
<div class="info">
<p>数据:{{scope}}</p>
<p>索引:{{scope.$index}}</p>
<p>姓名:{{scope.row.name}}</p>
<p>性别:{{scope.row.sex}}</p>
</div>
</template>
</list>
........其他模版代码
// 子组件模版 list
<ul>
<li v-for="(item,i) in data">
<slot :row="item" :$index="i"></slot>
</li>
</ul> js:
......
props: {
data: {
default: [],
type: Array
}
}
.....
父模版渲染后:
<ul>
<li v-for="(item,i) in data">
<div class="info">
<p>数据:{{item}}</p>
<p>索引:{{item.i}}</p>
<p>姓名:{{item.name}}</p>
<p>性别:{{item.sex}}</p>
</div>
</li>
</ul>
父组件把数据listData传递给子组件 data , 子组件通过作用域插槽把值传递给父组件scope
注意:<slot :row="item" :$index="i"></slot> 这里的属性在上面list组件调用的时候就会打印出一个对象{ "row": { "name": "张三", "sex": "男" }, "$index": 0 }
v2.5.0+
slot-scope
能被用在任意元素或组件中而不再局限于 <template>
// 子组件模版 my-list
<ul>
<slot name="item-child"
v-for="item in items"
:text="item.text">
<!-- 这里写入备用内容 -->
</slot>
</ul>
// 父组件模版
<my-list :items="items">
<li
slot="item-child"
slot-scope="props"
class="my-fancy-item">
{{ props.text }}
</li>
</my-list>
vue2.0 之 slot 内容分发的更多相关文章
- vue2.0使用slot插槽分发内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue中slot内容分发
<slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性 <!DOCTYPE html> <html> <head> <meta ...
- 玩转vue的slot内容分发
vue的内容分发非常适合"固定部分+动态部分"的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会 ...
- slot内容分发
vue实现了一套内容分发的API,这套API基于当前的web components规范草案,将<slot>元素作为承载分发内容的出口. 在前面的父子组件中,我们提到过,在vue中,组件实例 ...
- vue slot内容分发
当需要让组件组合使用,混合父组件的内容和子组件的模板的时候,就会用到slot.这个过程就叫内容分发. 最为常用的是两种slot:一种是匿名slot, 一种是具名slot. 匿名 很好理解: 就是默认, ...
- Vue中的slot内容分发
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...
- Vuejs——(11)组件——slot内容分发
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- Vuejs——slot内容分发
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下父组件在子组件内套的内容,是不显示的. 例如代 ...
- vue2.0 slot用法
学习vue.js也有一段时间了,关于slot这一块,也看了不少次了,总感觉有点迷迷糊糊,不知其然也不知其所以然,抽出一段完整的时间,再一次仔细学习.稍微有点理解了,在此稍作记录,好记性不如烂笔头嘛! ...
随机推荐
- 【Spark机器学习速成宝典】基础篇03数据读取与保存(Python版)
目录 保存为文本文件:saveAsTextFile 保存为json:saveAsTextFile 保存为SequenceFile:saveAsSequenceFile 读取hive 保存为文本文件:s ...
- win10 配置tensorflow环境
1. 在anaconda中新增环境 python3.5, 我使用的是anaconda-navigator 中新增的环境,python版本选择3.5 2. 激活新增加的环境, 注意win下,没有sour ...
- 3、Shiro授权
Shiro授权过程和认证过程相似: 项目结构: package com.shiro.shiroframe; import org.apache.shiro.SecurityUtils; import ...
- OpenStack Nova 高性能虚拟机之 NUMA 架构亲和
目录 文章目录 目录 写在前面 计算平台体系结构 SMP 对称多处理结构 NUMA 非统一内存访问结构 MPP 大规模并行处理结构 Linux 上的 NUMA 基本对象概念 NUMA 调度策略 获取宿 ...
- Java多线程学习——死锁的一个容易理解的例子
发生死锁的情况:多个线程需要同时占用多个共享资源而发生需要互相死循环等待的情况 public class Mirror { //镜子 } public class Lipstick { //口红 } ...
- 【Qt开发】V4L2 API详解 背景知识 打开设备设置参数
www.linuxtv.org下,有篇文档详细讲解了V4L2相关知识和体系结构.是V4L2方面最全面的文档.可以通过它学习V4L2的一些思路和想法. http://www.linuxtv.org/do ...
- Hive-多分隔符
ROW FORMAT SERDE 'org.apache.hadoop.hive.contrib.serde2.MultiDelimitSerDe' WITH SERDEPROPERTIES (&qu ...
- CentOS7 源进源出
echo 200 ct >> /etc/iproute2/rt_tablesecho 201 cu >> /etc/iproute2/rt_tables ip route ad ...
- 基于bs4库的HTML查找方法
基于bs4库的HTML查找方法 find_all方法 <>.find_all(name,attrs,recursive,string,**kwargs) 返回一个列表类型,内部存储查找的结 ...
- js获取url中的参数(解决中文乱码)
这个是封装好的方法: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...