Vue学习笔记:Slot
转自:https://www.w3cplus.com/vue/vue-slot.html
在Vue中,slot
也分多种,从Vue的官网中可以获知,其主要分为:单个插槽、具名插槽和作用域插槽三种
- 父组件的内容是在父组件作用域编译,子组件的内容是在子组件作用域编译。
- Vue的
slot
一般用在父组件向子组件分发内容,该内容的编译作用域名为父组件作用域。 - 父组件分发内容给子组件,子组件需要一个<slot></slot>标签进行接收,分发和接收同时才能真正实现分发
如果子组件template
中没有包含任何一个<slot>
时,就算父组件分发再多的内容也将会被丢弃。只有子组件模板只要有一个没有属性的slot
(因为在模板中可以有多个带属性的slot
,后面的内容会介绍),父组件传入的整个内容片段将插入到slot
所在的DOM位置,并将替换掉slot
本身。
最初在<slot>
中的任何内容都被视为备用内容(也可以在最初的<slot>
中不放置任何默认内容)。备用内容在子组件的作用域内编译,并且只有在宿主元素(父组件没有分发任何内容)为空,且没有要插入的内容时才显示备用内容。
单个插槽
子组件中使用一个默认的<slot></slot>接收分发的所有内容。
具名插槽
<slot>
可以用一个特殊的属性name
来进一步配置父组件如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应slot
特性的元素。
仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
//子组件根据名称接收分发的内容
<template id="modal">
<div class="modal-backdrop">
<div class="modal" @click.stop>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
</div>
</template>
父组件根据slot名称进行分发的
<div id="app">
<modal v-show="toggleModal" @click="closeModal">
<div class="modal-header" slot="header">
<div class="close rotate" @click="closeModal">
<i class="fa-times fa"></i>
</div>
<h3 class="modal-title">Modal Header</h3>
</div>
<div class="modal-body" slot="body">
<h3>Modal Body</h3>
<p>Modal body conent...</p>
</div>
<div class="modal-footer" slot="footer">
<button class="btn" @click="closeModal">关闭</button>
</div>
</modal>
<button class="btn btn-open" @click="showModal">Show Modal</button>
</div>
作用域插槽
作用域插槽是一种特殊类型的插槽,用作一个(能被传递数据的)可重用模板,来代替已经渲染好的元素。
在子组件中,只需将数据传递到插槽,就像你将prop
传递给组件一样:
在父级中,具有特殊特性 slot-scope
的 <template>
元素必须存在,表示它是作用域插槽的模板。slot-scope
的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop
对象:
在 2.5.0+,
slot-scope
能被用在任意元素或组件中而不再局限于<template>
。
作用域插槽更典型的用例是在列表组件中,允许使用者自定义如何渲染列表的每一项:
//父组件
<div id="app">
<!--Shapes-->
<my-list :items="shapes" title="Shapes">
<template scope="shape">
<div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
</template>
</my-list> <!--Colors-->
<my-list :items="colors" title="Colors">
<template scope="color">
<div>
<div class="swatch" :style="{ background: color.hex }"></div>
{{ color.name }}
</div>
</template>
</my-list>
</div>
//子组件
<script type="text/x-template" id="my-list">
<div class="my-list">
<div class="title">{{ title }}</div>
<div class="list">
<div class="list-item" v-for="item in items">
<slot v-bind="item"></slot>
</div>
</div>
</div>
</script>
//全局子组件
Vue.component('my-list', {
template: '#my-list',
props: [ 'title', 'items' ]
});
//实例化的数据初始化
new Vue({
el: '#app',
data: {
shapes: [
{ name: 'Square', sides: 4 },
{ name: 'Hexagon', sides: 6 },
{ name: 'Triangle', sides: 3 }
],
colors: [
{ name: 'Yellow', hex: '#F4D03F', },
{ name: 'Green', hex: '#229954' },
{ name: 'Purple', hex: '#9B59B6' }
]
}
});
如果想进一步的了解slot
中的作用域插槽,可以阅读《Vue的作用域插槽》一文。著作权归作者所有。
总结:
这篇文章主要学习和了解了Vue中的插槽<slot>
。是一个空壳子,它显示与否以及怎么显示完全是由父组件来控制。不过,插槽显示的位置由子组件自身决定,slot
写在组件template
的哪块,父组件传过来的模板将来就显示在哪块。在写一些组件的时候,slot
能帮助我们做很多事情,也能让组件可复用性变得更为灵活。
Vue学习笔记:Slot的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
随机推荐
- AHOI2012 信号塔 | 最小圆覆盖模板
题目链接:戳我 最小圆覆盖. 1.枚举第一个点,考虑当前圆是否包含了这个点,如果没有,则把圆变成以这个点为圆心,半径为0的圆. 2.枚举第二个点,考虑圆是否包含了这个点,如果没有,则把圆变成以这两个点 ...
- Nmap 扫描
最近在家里学习渗透,看到了nmap对服务器进行端口扫描,记录学习如下: Nmap支持非常多的扫描方式,包括TCP Syn ,TCP Connect,TCP ACK,TCP FIN/Xmas/NULL, ...
- 微信小程序二维码是无法识别二维码跳转到小程序
今天测试了一下,微信小程序圆形二维码是不能直接识别跳转到小程序: 但h5页面的那种微信公众号二维码是可以直接识别
- mongodb 日志清理
#!/bin/bash #Rotate the MongoDB logs to prevent a single logfile from consuming too much disk space. ...
- Bootstrap中表单控件状态(验证状态)
Bootstrap 表单 http://www.runoob.com/try/try2.php?filename=bootstrap3-form-controlstate (这链接里有简介) &l ...
- set,env和export命令显示shell变量其区别,与环境变量扫盲(一)
种类: ♦ set : 用来显示本地变量,显示当前shell的变量,包括当前用户的变量 ♦ env : 用来显示环境变量,显示当前用户的变量. ♦ export: 用来显示和设置环 ...
- 架构师养成记--18.NIO
有人叫new IO 我这里就叫Non-block IO 经典概念: Buffer(缓冲区):之前直接通过流,现在提供一个buffer存放数据. Channel:管道,包括ServerSocketCha ...
- 基于CentOS7系统一键配置Aria2 实现服务器离线下载工具
我们有些网友购买的海外VPS主机并不是用来做网站的,而是用来作为下载资源工具使用的.确实用这样的工具搭建之后是比本地下载速度快,因为有些资源.软件等是海外资源,而且挂载在服务器上不占用本地的资源.在这 ...
- Mysql update from
UPDATE tab1 a INNER JOIN tab_game_version as b ON a.id=b.id SET a.advert_data=0 where a.advert_dat ...
- git 远程库和url
我们使用 git remote add origin <url> 来关联远程主机,这个origin就是关联的远程主机名,如果我们想同时关联两个远程主机,我们可以用 git remote a ...