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

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

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

1.单个slot

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

  1. <body >
  2.     <div id="app">
  3.         <h1>我是父组件的标题</h1>
  4.         <my-component>
  5.           <p>这是一些初始内容</p>
  6.           <p>这是更多的初始内容</p>
  7.         </my-component>
  8.     </div>
  9.         <script src="js/vue.min.js"></script>
  10.         <script>
  11.             new Vue({
  12.               el:'#app',
  13.               components:{
  14.                 myComponent:{
  15.                   template:'<div><h2>我是子组件的标题</h2><slot>只有在没有要分发的内容时才会显示。</slot></div>',
  16.             }
  17.           }
  18.         })
  19.         </script>
  20. </body>

2.具名slot

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

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

  1.       <app-layout>
  2.         <h1 slot="header">这里可能是一个页面标题</h1>
  3.         <p>主要内容的一个段落。</p>
  4.         <p>另一个主要段落。</p>
  5.         <p slot="footer">这里有一些联系信息</p>
  6.       </app-layout>
  7.         <script src="js/vue.min.js"></script>
  8.         <script>
  9.         new Vue({
  10.           el:'#container',
  11.           components:{
  12.             appLayout:{
  13.               template:'<div class="container">
    　　　　　　　　　　　　　　　　<header><slot name="header"></slot></header>
    　　　　　　　　　　　　　　　　<main><slot></slot></main>
    　　　　　　　　　　　　　　　　<footer><slot name="footer"></slot></footer>
    　　　　　　　　　　　　　　</div>',
  1.             }
  2.           }
  3.         })

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. 当谈到 GitLab CI 的时候，我们该聊些什么（上篇）

    "微服务"这个概念近两年非常热,正在慢慢改变 DevOps 的思路.微服务架构把一个庞大的业务系统拆解开来,每一个组件变得更加独立自治.松耦合.但是,同时也伴随着部署单元粒度越来越 ...

  2. 【转载】使用CSS将图片转换成黑白(灰色、置灰)

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=2547原文摘要: . ...

  3. win10 uwp DataContext

    本文告诉大家DataContext的多种绑法. 适合于WPF的绑定和UWP的绑定. 我告诉大家很多个方法,所有的方法都有自己的优点和缺点,可以依靠自己喜欢的用法使用.当然,可以在新手面前秀下,一个页面 ...

  4. win10 uwp 圆角按钮

    本文讲的是如何做圆角按钮,我们在UWP本来的按钮都是矩形,圆角Radius没有,所以本文就用简单方法去做圆角按钮. 我们按钮需要圆角,而自带没有,其实做一个很简单,把原来的按钮变为背景透明,然后使用矩 ...

  5. Sql语句备份Sqlserver数据库

    BACKUP DATABASE [POS_YiZhuang]TODISK = N'C:\数据库\POS_YiZhuang2016-09-20-3.bak'WITHNAME = N'POS_YiZhua ...

  6. C#实现软件开机自启动原理与代码

    1.软件自启动原理 软件自启动的原理要从Windows的注册表聊起,在Windows操作系统下,主要有2个文件夹和8个注册表键项控制程序的自启动,这部分的详细介绍可以参看博客http://www.cn ...

  7. Noip2016组合数（数论）

    题目描述 组合数表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的定 义,我们可以给出计算 ...

  8. （转）利用JConsole工具监控java程序内存和JVM

    转自:http://www.cnblogs.com/luihengk/p/5446279.html 一.找到java应用程序对应的进程PI 性能测试应用程序访问地址:http://192.168.29 ...

  9. Python3爬虫登录模拟

    使用Python爬虫登录系统之后,能够实现的操作就多了很多,下面大致介绍下如何使用Python模拟登录. 我们都知道,在前端的加密验证,只要把将加密环境还原出来,便能够很轻易地登录. 首先分析登录的步 ...

  10. MongoDB聚合(count、distinct、group、MapReduce)

    1. count:返回集合中文档的数量. db.friend.count() db.friend.count({'age':24}) 增加查询条件会使count查询变慢. 2. distinct:找出 ...