Vuejs-组件-<slot> 标签分发内容
资料来自：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> 标签分发内容的更多相关文章
- vue组件-使用插槽分发内容(slot)
slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容 使用组件时,有 ...
- Vue组件-使用插槽分发内容
在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...
- vue2.0使用slot插槽分发内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- Vuejs——（11）组件——slot内容分发
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- Vue 组件&组件之间的通信 之 使用slot分发内容
slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- vue组件详解（四）——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
随机推荐
- web容器启动后自动执行程序的几种方式比较
1. 背景 1.1. 背景介绍 在web项目中我们有时会遇到这种需求,在web项目启动后需要开启线程去完成一些重要的工作,例如:往数据库中初始化一些数据,开启线程,初始化消息队 ...
- python之集合
集合(set),它是一个无序的,不重复的数据组合,它是作用如下: 1.去重,也就是去除重复的内容.有一点值得注意的是:将一个列表(list)变成集合的时候,会自动去重. 2.关系测试.测试数据之间的交 ...
- mysql分表场景分析与简单分表操作
为什么要分表 首先要知道什么情况下,才需要分表个人觉得单表记录条数达到百万到千万级别时就要使用分表了,分表的目的就在于此,减小数据库的负担,缩短查询时间. 表分割有两种方式: 1水平分割:根据一列或多 ...
- 解析PHP多种序列化与反序列化的方法
1. serialize和unserialize函数这两个是序列化和反序列化PHP中数据的常用函数. 复制代码 代码如下: <?php$a = array('a'=> 'Apple' ,' ...
- Django数据库操作性能相关
Django数据库操作性能相关 案例: 现在我们的数据库中有两张表如下: 1.职员表: class UserInfo(models.Model): name = models.CharField(ma ...
- 【转】S3C2440与SDRAM NorFlash NandFlash连线分析
一.SDRAM(HY57V561620F)连线分析 1. S3C2440 有27根地址线ADDR[26:0],8根片选信号ngcs0-ngcs7,对应bank0-bank7,当访问bankx 的地址 ...
- LINUX 笔记-wget命令
使用wget下载单个文件 命令:wget http://www.minjieren.com/wordpress-3.1-zh_CN.zip 使用wget -c断点续传 命令:wget -c http: ...
- Servlet 笔记-生命周期
Servlet 生命周期可被定义为从创建直到毁灭的整个过程.以下是 Servlet 遵循的过程: Servlet 通过调用 init () 方法进行初始化. Servlet 调用 service() ...
- tp5上传图片添加永久素材到微信公众号
$file = request()->file('image');if(!$file){ $res['status'] = false; $res['msg'] = '必须上传文件'; retu ...
- Java基础笔记14
1.反射. Class:反射类 任何一个类都有一个Class反射类.(影子) java.lang.reflect.*; Field:字段类 Method:方法类类 Constructor:构造方法类. ...