资料来自: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. Django创建通用视图函数

    想在我们有两个视图: def thinkingview(request): user = request.user if request.method == 'GET': return render( ...

  2. 容器中使用iptables报错can't initialize iptables table Permission denied (you must be root)

    背景 在docker容器中部署了一微服务,该服务需要docker push镜像到docker registry.因此,docker容器中需要安装docker服务.但在启动容器的时候,却报错: can' ...

  3. 深入浅出 SpringMVC - 2 提升篇

    前言: 本篇笔记是继 深入浅出 SpringMVC - 1 后的续篇,主要介绍了 SpringMVC 的实际小应用,包括 SpringMVC 的数据格式化.使用 JSR 303 验证标准 在 Spri ...

  4. java自动化测试-http请求结合抓包工具实际应用

    继上文我编写了java的get请求与post请求之后,我现在开始写一下实际操作 很多人有疑问,接口测试的代码是哪里来的,怎么来的呢?看得见吗?我来做一个简单的演示 我们这里简单介绍一下抓包工具,对于一 ...

  5. 张高兴的 Windows 10 IoT 开发笔记:RTC 时钟模块 DS3231

    GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/DS3231 注意:不包含闹钟设置

  6. js金钱转大写

    function Arabia_to_Chinese(Num) { // var money=$("#deal_amount").val(); for ( i = Num.leng ...

  7. 栈(存储结构链表)--Java实现

    /*用链表实现栈--链栈 * */ public class MyLinkedStack { public MyLinkedList linklist; int items; public MyLin ...

  8. TensorFlow Object Detection API(Windows下训练)

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 最近事情比较多,前面坑挖的有点久,今天终于有时间总结一下,顺便把Windows下训练跑通.Li ...

  9. 改变 font Awesome、Ionic 图标属性

    可使用 -webkit-text-stroke属性. 例如: -webkit-text-stroke:1px red 使用color属性,可改变 图标颜色: 例如: color: red: 使用fon ...

  10. 【hihoCoder】#1039 : 字符消除 by C solution

    #1039 : 字符消除 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在玩一个字符消除游戏.给定一个只包含大写字母"ABC"的字符串s,消 ...