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 分发内容 学习总结。的更多相关文章

  1. Vue 组件&组件之间的通信 之 使用slot分发内容

    slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...

  2. Vue:实践学习笔记(6)——使用SLOT分发内容

    Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...

  3. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

  4. vue组件详解(四)——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  5. Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)

    #单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...

  6. vue 外卖app(3) 利用slot分发内容

    1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...

  7. 使用slot分发内容

    为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板.这个过程被称为 内容分发 使用特殊的<slot>元素作为原始内容的插槽 除非子组件模板包含至少一个<slot&g ...

  8. vue2.X slot 分发内容

    1.概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 2.默认情况下 父组件在子组件内套的内容,是不显示的. ...

  9. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

随机推荐

  1. Mysql链接字符串问题

    <add key="ConnstringMySql" value="server=xxx.xxx.xxx.xxx;database=YourDatabase;uid ...

  2. 「HNOI 2015」亚瑟王

    \(Description\) 有\(n\)张卡牌,每一张卡牌有\(p_i\)的概率发动,并造成\(d_i\)点伤害.一共有\(r\)轮,每一轮按照编号从小到大依次考虑,如果这张牌已经发动过则跳过该牌 ...

  3. css3动画(animation)效果2-旋转的星球

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

  4. IE6 IE7 IE8 FF兼容符号

    2.区别IE8.IE9 一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack. 因为IE8及以下版本是不支持CSS3的,但是我们 ...

  5. 洛谷P5158 【模板】多项式快速插值

    题面 传送门 前置芝士 拉格朗日插值,多项式多点求值 题解 首先根据拉格朗日插值公式我们可以暴力\(O(n^2)\)插出这个多项式,然而这显然是\(gg\)的 那么看看怎么优化,先来看一看拉格朗日插值 ...

  6. SQL语句insert into 不存在则插入,存在则修改

    一 测试表的创建 -- ---------------------------- -- Table structure for User -- ---------------------------- ...

  7. 网络CCNA基础了解

    关于网络 CCNA.CCNP.CCIE 中的 CCNA 一.逻辑与.或.非 AND --> "与"计算 1 AND 1 = 1(取严) 1 AND 0 = 0 0 AND 1 ...

  8. Git密钥

    SSH keys SSH key 可以让你在你的电脑和Code服务器之间建立安全的加密连接. 先执行以下语句来判断是否已经存在本地公钥: 1. cat ~/.ssh/id_rsa.pub    如果你 ...

  9. Python中的正斜杠/与反斜杠\

    知识点: 1. "/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠 2. 对于目录分隔符,Unix和Web用正斜杠/,Windows用反斜杠\. ...

  10. [转] shell逻辑运算总结, 包括[[]]与[]的区别,&&与-a的区别,||与-o的区别

    [From] https://www.cnblogs.com/tony1314/p/8315666.html 1. 关于文件和目录 -f  判断某普通文件是否存在 -d  判断某目录是否存在 -b  ...