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>& ...
随机推荐
- break和continue 的区别
区别 break和continue都可在循环语句里面使用,也都可以控制外层的循环.但是continue只能在循环语句里面使用,break也可以使用在switch语句里面. break具体作用在循环语句 ...
- 吐槽CSDN--想赚钱想疯了--强行升级皮肤--增加广告位
一直对CSDN很有好感,和博客园同是技术分享的好平台,但是界面更清爽,用户间互动也较多.在学生时代就一直在用,平时抄个作业,竞赛搜个题,论文需要凑字数等等.当年为了下载一份源代码,或者为了下载某本买不 ...
- SAP smartform 实现打印条形码
先在SE73里定义一个新的BARCODE,注意一定要用新的才可以,旧的是打印不出来的. 然后定义一个SMARTFORM的样式,把你定义的BARCODE放到字符样式里面去. 再做SMARTFORM就可以 ...
- UVa 10954，Add All
Huffman编码简化版,优先队列搞定. 1A 调试的时候发现一个问题..木有想明白...问题代码里给出,哪位大神给解释下. #include <iostream> #include &l ...
- Debian 9 中手动设置有线网络
multi-user.target中不使用networkmanager,上网需要手动设置后才可以,进行有线网线的设置: 首先得到网卡名称:ip addr or ls /sys/class/net/,以 ...
- es6总结
主要包括let const,模板字符串,解构赋值,箭头函数,扩展运算符,Promise,类,import export等 一.let和const 1.let所声明的变量只在let所在的代码块内有效.l ...
- 视觉词袋模型(BOVW)
一.介绍 Bag-of-words model (BoW model) 最早出现在神经语言程序学(NLP)和信息检索(IR)领域. 该模型忽略掉文本的语法和语序, 用一组无序的单词(words)来表达 ...
- Leetcode题解（十）
29.Divide Two Integers 题目 题目要求不用乘除和取模运算,实现两个整数相除: 我的第一想法就是把除法变成减法来做,这也是最初除法的定义,其实现代码如下: class Soluti ...
- 2017 ICPC 广西邀请赛1004 Covering
Covering Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- windy数（数位DP）
windy数Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:165888KB 64bit I ...