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>& ...
随机推荐
- iOS多线程基本使用
大家都知道,在开发过程中应该尽可能减少用户等待时间,让程序尽可能快的完成运算.可是无论是哪种语言开发的程序最终往往转换成汇编语言进而解释成机器码来执行.但是机器码是按顺序执行的,一个复杂的多步操作只能 ...
- 前端页面卡顿、也许是DOM操作惹的祸？
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...
- word2vec 在 非 自然语言处理 (NLP) 领域的应用
word2vec 本来就是用来解决自然语言处理问题的,它在 NLP 中的应用是显然的. 比如,你可以直接用它来寻找相关词.发现新词.命名实体识别.信息索引.情感分析等:你也可以将词向量作为其他模型的输 ...
- OMP算法代码学习
正交匹配追踪(OMP)算法的MATLAB函数代码并给出单次测试例程代码 测量数M与重构成功概率关系曲线绘制例程代码 信号稀疏度K与重构成功概率关系曲线绘制例程代码 参考来源:http://blog ...
- 一天工作所用到的Git命令
一天工作所用到的Git命令 像大多数新手一样,我一开始是在网上搜索 Git 命令,然后把答案复制粘贴,并没有真正理解它们究竟做了什么. 后来我曾经想过:"如果有一个最常见的 Git 命令的列 ...
- 在unity3d游戏中添加中文语音控制
最近打算尝试一下OLAMI在游戏中应用的可能性,这里做一下记录. unity官方教程中的几个项目很精简,但看起来很不错,里面有全套的资源.最后我选择了tanks-tutorial来做这个实验. 下载和 ...
- DNS over TLS到底有多牛？你想知道的都在这儿
DNS over TLS,让电信.移动等各种ISP无法监视你的浏览轨迹...... SSL证书有助于客户端浏览器和网站服务器之间的加密连接. 这意味着在连接期间,所有的通信和活动都被遮蔽. 但通常意义 ...
- github 项目绑定自己的域名
上周脑子发热申请了自己的一个域名.本想搞一个自己的网站,后来囊中羞涩,数据库,服务器..买不起了,只买个域名,发现啥也搞不成.后来突然想到了不行找个东西映射到这个域名上吧,就想到了github,之前也 ...
- MongoDB正则表达式
MongoDB 使用 $regex 操作符来设置匹配字符串的正则表达式. 1. 搜索包含某关键字的内容: db.posts.find({post_text:{$regex:"w3cschoo ...
- Mybatis报错:Parameter 'list' not found. Available parameters are [groupList, param1]
GroupDao.java 里面定义的方法: void batchInsertLog(@Param("groupList") List<MktPromotionIntegra ...