vue 使用Slot 分发内容 学习总结。
https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容 官方API地址
我对solt的理解是当组件中某一项需要单独定义,那么就应该使用solt。 举例说明。例如项目中需要一个模态框提示 付款成功,付款失败。那么这个模态框也就仅仅差这几个字或者是状态图片而已。那么此时应用solt就是一个非常不错的选择。
目录结构
单个slot
除非子组件模板包含至少一个 <slot>
插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。
最初在 <slot>
标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
以下代码为 app.vue文件中的代码
<template>
<div id="app">
<children>
<span>子组件内部元素</span>
</children>
</div>
</template> <script>
export default {
name: 'hello',
components: {
children: {
template: '<div>这里是子组件</div>'
}
}
}
</script>
渲染结果为
我们发现写在 children模板内部的span被默认删除了。如果想让span显示那么此刻就应该使用slot。
代码实例:对App.vue的代码做如下修改
<template>
<div id="app">
<children>
<span>子组件内部元素</span>
</children>
</div>
</template> <script>
export default {
name: 'hello',
components: {
children: {
template: '<div><slot><p>默认效果</p></slot>这里是子组件</div>'
}
}
}
</script>
那么此时span标签的内容就被渲染出来了。如果在childrem中如果不写span标签那么slot默认会渲染slot里面的内容
具名slot
上面案例中讲解的是当组件的模板中有一个slot的方法,那么一个组件中如果想使用多个slot那么此时就应该使用具名slot。
<slot>
元素可以用一个特殊的属性 name
来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot
特性的元素。
仍然可以有一个匿名 slot ,它是默认 slot ,作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ,这些找不到匹配的内容片段将被抛弃。
代码实例:修改App.vue的代码
<template>
<div id="app">
<children>
<div slot="header">
<ul>
<li>首页</li>
<li>商城</li>
</ul>
</div>
<div>
这个是默认的没有具名的solt
</div>
<div slot="footer">
<p>备案号</p>
</div>
</children>
</div>
</template>
<script>
var Child = {
template: ' <div>这是子组件<div></div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div>'
}
export default {
name: 'hello',
components: {
children: Child
}
}
</script>
渲染结果为
vue 使用Slot 分发内容 学习总结。的更多相关文章
- Vue 组件&组件之间的通信 之 使用slot分发内容
slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)
#单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...
- vue 外卖app(3) 利用slot分发内容
1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...
- 使用slot分发内容
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板.这个过程被称为 内容分发 使用特殊的<slot>元素作为原始内容的插槽 除非子组件模板包含至少一个<slot&g ...
- vue2.X slot 分发内容
1.概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 2.默认情况下 父组件在子组件内套的内容,是不显示的. ...
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
随机推荐
- Mysql链接字符串问题
<add key="ConnstringMySql" value="server=xxx.xxx.xxx.xxx;database=YourDatabase;uid ...
- 「HNOI 2015」亚瑟王
\(Description\) 有\(n\)张卡牌,每一张卡牌有\(p_i\)的概率发动,并造成\(d_i\)点伤害.一共有\(r\)轮,每一轮按照编号从小到大依次考虑,如果这张牌已经发动过则跳过该牌 ...
- css3动画(animation)效果2-旋转的星球
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- IE6 IE7 IE8 FF兼容符号
2.区别IE8.IE9 一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack. 因为IE8及以下版本是不支持CSS3的,但是我们 ...
- 洛谷P5158 【模板】多项式快速插值
题面 传送门 前置芝士 拉格朗日插值,多项式多点求值 题解 首先根据拉格朗日插值公式我们可以暴力\(O(n^2)\)插出这个多项式,然而这显然是\(gg\)的 那么看看怎么优化,先来看一看拉格朗日插值 ...
- SQL语句insert into 不存在则插入,存在则修改
一 测试表的创建 -- ---------------------------- -- Table structure for User -- ---------------------------- ...
- 网络CCNA基础了解
关于网络 CCNA.CCNP.CCIE 中的 CCNA 一.逻辑与.或.非 AND --> "与"计算 1 AND 1 = 1(取严) 1 AND 0 = 0 0 AND 1 ...
- Git密钥
SSH keys SSH key 可以让你在你的电脑和Code服务器之间建立安全的加密连接. 先执行以下语句来判断是否已经存在本地公钥: 1. cat ~/.ssh/id_rsa.pub 如果你 ...
- Python中的正斜杠/与反斜杠\
知识点: 1. "/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠 2. 对于目录分隔符,Unix和Web用正斜杠/,Windows用反斜杠\. ...
- [转] shell逻辑运算总结, 包括[[]]与[]的区别,&&与-a的区别,||与-o的区别
[From] https://www.cnblogs.com/tony1314/p/8315666.html 1. 关于文件和目录 -f 判断某普通文件是否存在 -d 判断某目录是否存在 -b ...