本章开始介绍slot机制。

slot是WEBComponent引进的东西，叫做插槽。在浏览器中，它为一个content元素。不过有资料表明，它会更名为slot。 并且在其他语言的模板引擎中，slot标签更为常用。因此avalon2的组件机制使用slot元素。

但说了这么久，slot元素到底是什么鬼？slot是一个占位符。它有一个name属性。假如另一个地方，也有一个元素，它带一个slot属性，当这两个属性值一致，那么那个元素就会 挪过来，替换掉这个slot元素。

<p id="eee"><slot name="aaa">这是插槽元素，这里面的内容是什么也无关</slot></p>
<p id="kkk"><span slot="aaa">这是要移动的元素</span></p>

最后会转换为

<p id="eee"><span slot="aaa">这是要移动的元素</span></p>
<p id="kkk"></p>

是不是很神奇呢？但是这不是所有浏览器都支持。avalon2 使用了一些魔术让IE6也支持slot。

为了方便我们下面的讲解。我们需要引入更多概念。

slot标签元素: 插槽元素， 用来占位，就是我们上学时，用一本书放在某个座位上占着位置。
带slot属性的元素： 插卡元素，用来替换同名的插槽元素。

然后到我们的组件，我们使用wbr, xmp, template, ms-*等元素来声明它们是某种组件，它们称之为组件容器（所有带ms-widget属性的元素都是插槽元素）。它们与插槽元素一样，是用来占位与被替换掉的。

<div ms-controller='widget1' ><xmp :widget="{is:'ms-button'}" ><span slot="content">button!</span></xmp><p><button :click="@click">click</button></p>
</div>

那么组件容器是被谁替换呢？当然是组件。我们使用avalon.component来定义组件时，必须有一个template属性，它是一个HTML模块，它会转换为组件。比如说上面的ms-button.

 avalon.component('ms-button', {template: '<button type="button"><slot name="content" /></button>',defaults: { }
})

template里面有slot元素来占位，而组件容器里面有带slot属性的元素来替换。

一个组件可以拥有N个slot元素，它们的name值不能重复。但是外面的插卡元素则可以重复。

    avalon.component('ms-tabs', {template: '<div><p>它有{{@num}}个面板</p><slot name="tab"/></div>',defaults: {num: 3}})vm = avalon.define({$id: 'widget1'})
<div ms-controller='widget1' ><xmp :widget="{is:'ms-tabs'}"><div slot="tab">面板1</div><hr><div slot="tab">面板2</div><hr><div slot="tab">面板3</div><hr></xmp>
</div>

生成的结构如下：

这也是我们做切换卡的基础。好了，我们看一下切换卡是如何做的。

DOCTYPE html><html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src='../../dist/avalon.js'></script><script>function heredoc(fn) {return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')}avalon.component('ms-tabs', {template: heredoc(function () {/*<div><div><slot name="btn"/></div><div><slot name="tab"/></div></div>*/}),defaults: {buttons: [],tabs: [],active: function (index) {this.activeIndex = index},activeIndex: 0,}})var vm = avalon.define({$id: 'widget1',buttons: [111, 222, 333],aa: '动态内容',ddd: function () {console.log('xxxx')},change: function () {vm.aa = '更新内容'+(new Date -0)}})</script></head><body><h1>slot的使用</h1><p>对slot元素使用循环绑定生成大量元素,一起迁进组件内部</p><div ms-controller='widget1' ><xmp :widget="{is:'ms-tabs',buttons: @buttons}"><button ms-for='(index,button) in @buttons'ms-click='@active(index)'type='button'slot='btn'>{{button}}</button><div slot="tab" ms-visible="0 == @activeIndex"><p>这是面板1</p></div><div slot="tab" ms-visible="1 == @activeIndex">{{@aa}} <button ms-click="@change" type="button">change</button></div><div slot="tab" ms-visible="2 == @activeIndex">这是面板3</div></xmp></div></body>
</html>

切换卡包含两大块内容，上面用来切换的按钮，及下面的用来显示的面板。由于每次只显示一个面板，我们需要使用ms-visible来做隐藏。

最后生成的切换卡是这样的。

我们可以下这样的结论。slot用来为组件传入大片内容的， ms-widget配置项是用来传入够短的配置项。

大家可以在这里看到源码。

一步步编写avalon组件03：切换卡组件相关推荐

  1. vue 分步引导组件_引导卡组件：完整介绍

    vue 分步引导组件 In this article, I'm going to introduce you to the Bootstrap card component and walk you ...

  2. vue组件定义、组件的切换、组件的通信、渲染组件的几种方式（标签、路由、render）...

    vue中全局的概念是什么?---就是全局定义的功能,所有实例化的vm都可以使用,  全局定义的是挂在构造函数Vue上面的,所以实例化出的对象都可以使用这个功能 1.什么是组件?---从UI的角度把页面 ...

  3. 关于Unity VideoPlayer组件 视频切换第一帧卡顿

    关于Unity VideoPlay组件 视频切换第一帧卡顿的问题 1.问题: 在做项目时,发现VideoPlayer组件在多个视频切换时,会在第一帧重复上个视频的结束时的画面. 2.原因: 因为Vid ...

  4. 一步步编写操作系统 71 直接操作显卡，编写自己的打印函数71-74

    一直以来,我们在往屏幕上输出文本时,要么利用bios中断,要么利用系统调用,这些都是依赖别人的方法.咱们还用过一个稍微有点独立的方法,就是直接写显存,但这貌似又没什么含量.如今我们要写一个打印函数了, ...

  5. 一步步编写操作系统 69 汇编语言和c语言共同协作 70

    由于有了上一节的铺垫,本节的内容相对较少,这里给大家准备了两个小文件来实例演示汇编语言和c语言相互调用. 会两种不同语言的人,只是掌握了同一件事物的两种表达方式.人在学习一种新语言时,潜意识里是建立了 ...

  6. ViewPager -- Fragment 切换卡顿 性能优化

    当ViewPager切换到当前的Fragment时,Fragment会加载布局并显示内容,如果用户这时快速切换ViewPager,即 Fragment需要加载UI内容,而又频繁地切换Fragment, ...

  7. 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

    文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...

  8. 切换卡TabHost控件的使用

    在Android中,通常可以使用切换卡(选项卡)实现切换显示不同页面内容的功能.这一功能可以通过TabHost控件来实现. 下面我们就通过一个简单的实例演示如何使用TabHost控件完成切换卡功能,完 ...

  9. 围观窗体与组件03 - 零基础入门学习Delphi25

    围观窗体与组件03 让编程改变世界 Change the world by program 围观按钮型组件 Button.BitBtn.SpeedButton的一些区别 区别一:Button 不能显示 ...

  10. Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】

    Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目   录 4.组件化开发 4.1.组件的注册 全局注册 局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...

最新文章

  1. HTML5之音频audio知识（部分vedio）
  2. 《经济学人》也谈 Python：它会是我们的未来吗？
  3. 洛谷——P2872 [USACO07DEC]道路建设Building Roads
  4. 有线节点与无线节点的混合仿真模拟实验
  5. leetcode 376. Wiggle Subsequence | 376. 摆动序列（动态规划）
  6. SSTable数据结构
  7. 调用java的webservice返回null
  8. Android显示shp文件,Arcgis for Android移动平台能直接打开本地的shp文件吗
  9. SpringAOP基础以及四种实现方式
  10. Freeswitch 结合AIO100语音网关 发送短信
  11. Le le's picture when aged 5 monthes old_拔剑-浆糊的传说_新浪博客
  12. 用“真快乐”切入社交电商后，国美做“家装”能否多点开花？
  13. 关于纸质书管理APP的测评
  14. 从零开发Vscode上传图片插件
  15. 士兵队列训练问题(队列)
  16. 命令行错误: 无法打开 元数据 文件 platform.winmd
  17. 云计算的未来是XMPP
  18. 帕虫”(瑞星) “AV终结者”（金山）“U盘寄生虫”（江民）』查杀综述
  19. 无线电中继台天线的安装及注意事项
  20. 增强人体免疫力的方法

热门文章

  1. 转移服务器显示乱码,两台服务器之间数据传输乱码问题
  2. python一行输出_#python版一行内容分行输出
  3. python3连接MSSQL数据库 中文乱码怎么解决？
  4. JQuery 四个常用的DOM操作获得内容 - text()、html()、value 以及 val() ;取属性值attr()----前三个有回调函数
  5. matlab按图像边缘抠图_12. 泊松图像编辑
  6. python二进制文件读写文件_Python二进制文件读写
  7. hdmi接口有什么用_科普一下：电脑显示器用什么接口好，主流接口有哪些？
  8. 计算机学院学生会会徽设计,学生会会徽设计策划书
  9. c语言创建若干个成绩栏目,2015年计算机二级《C语言》考试上机测试题(6)
  10. 软件评測师真题考试分析-5