资料来自：https://cn.vuejs.org/v2/guide/components.html#具名-Slot

在官方文档的基础上，更加细致的讲解代码。

<slot> 标签中的任何内容都被视为备用内容，只有在宿主元素为空，它才显示。

1.单个slot

除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将丢弃。

<body >

    <div id="app">

        <h1>我是父组件的标题</h1>

        <my-component>

          <p>这是一些初始内容</p>

          <p>这是更多的初始内容</p>

        </my-component>

    </div>

        <script src="js/vue.min.js"></script>

        <script>

            new Vue({

              el:'#app',

              components:{

                myComponent:{

                  template:'<div><h2>我是子组件的标题</h2><slot>只有在没有要分发的内容时才会显示。</slot></div>',

            }

          }

        })

        </script>

</body>

2.具名slot

slot 可以有不同的名字。具名 slot 将匹配内容片段中所对应 slot 特性。

将对应的父组件嵌套到 具名 slot 的子组件 位置 的元素展示出来。

      <app-layout>

        <h1 slot="header">这里可能是一个页面标题</h1>

        <p>主要内容的一个段落。</p>

        <p>另一个主要段落。</p>

        <p slot="footer">这里有一些联系信息</p>

      </app-layout>

        <script src="js/vue.min.js"></script>

        <script>

        new Vue({

          el:'#container',

          components:{

            appLayout:{

              template:'<div class="container">
　　　　　　　　　　　　　　　　<header><slot name="header"></slot></header>
　　　　　　　　　　　　　　　　<main><slot></slot></main>
　　　　　　　　　　　　　　　　<footer><slot name="footer"></slot></footer>
　　　　　　　　　　　　　　</div>',
            }

          }

        })

Vuejs-组件-<slot> 标签分发内容的更多相关文章

  1. vue组件-使用插槽分发内容(slot)

    slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容 使用组件时,有 ...

  2. Vue组件-使用插槽分发内容

    在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...

  3. vue2.0使用slot插槽分发内容

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

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

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

  5. Vuejs——（11）组件——slot内容分发

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  6. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

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

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

  8. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  9. vue组件详解（四）——使用slot分发内容

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

随机推荐

  1. 每天十分钟系列：JS数据操作之神奇的map()

    Array.prototype.map() map()方法可以创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果. demo1 上面的例子,在控制台中打印的结果是: 1 2 3 ...

  2. Cocos 2d-X Lua 游戏添加苹果内购(一) 图文详解准备流程

    事前准备 最近给游戏添加了苹果的内购,这一块的东西也是刚刚做完,总结一下,其实这里不管是游戏还是我们普通的App添加内购这一块的东西都是差不多的,多出来的部分就是我们Lua和OC的交互的部分,以前刚开 ...

  3. 217. Contains Duplicate (leetcode)

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  4. bootstrap 鼠标悬停显示

    1. <button type="button" rel="drevil" data-content="报名截止时间:'+time+'" ...

  5. [IR] Concept Search and LDA

    重要的是通过实践更深入地了解贝叶斯思想,先浅浅地了解下LDA. From: http://blog.csdn.net/huagong_adu/article/details/7937616/ 传统方法 ...

  6. 解决执行sql脚本报错：没有足够的内存继续执行程序。

    出现执行sql脚本报错:没有足够的内存继续执行程序.是因为sql脚本过大,大家可能分为多个文件多次执行,这种笨方法可行,不过比较麻烦,大家可以用下面的方式,利用sqlcmd一次就行了:   执行cmd ...

  7. 机器翻译评测——BLEU算法详解

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/7679284.html 前言 近年来,在自然语言研究领域中, ...

  8. Linux系列教程（九）——Linux常用命令之网络和关机重启命令

    前一篇博客我们讲解了Linux压缩和解压缩命令,使用的最多的是tar命令,因为现在很多源码包都是.tar.gz的格式,通过 tar -zcvf 能完成解压.然后对于.zip格式的文件,使用gunzip ...

  9. 最新版multer1.3.0上传文件

    完整项目资源下载路径:http://download.csdn.net/detail/qq_28506819/9851744 使用方法: cd到跟目录,然后npm install. 运行项目,npm ...

  10. js判断值为null

    今天在做项目的时候,犯了一个着实不应该的错误,拿到data为null,然后判断如果为null执行A,否则执行B 我错误的代码是 if(data===null){ A; }else{ B; } 怎么调试 ...