❝即使前路茫茫无尽
我依然怀抱光明
❞
前言
Container容器，有多大，管饱吗？
很大很大！！
到底有多大？
那得看你的屏幕有多大咯
躺好了吗？准备开机，ACTION！
1 Container
组件插槽
卧槽！
想什么呢？人家是插槽好不好
小霸王知道不？超级玛丽总知道吧
瞧见没，那就是插槽，插卡的那个槽
不是卧槽！！！
代码片段
<section
class="el-container"
:class="{ 'is-vertical': isVertical }">
<slot></slot>
</section>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
computed: {
isVertical() {
...
return this.$slots && this.$slots.default
? this.$slots.default.some(vnode => {
const tag = vnode.componentOptions && vnode.componentOptions.tag;
return tag === 'el-header' || tag === 'el-footer';
})
: false;
...
}
}
技巧解析
❝❞
<slot></slot>
就是游戏机上的那个槽
有了槽之后，还得有卡，才能游戏呀<el-header>...<el-footer>
就是游戏卡
至于那个是超级玛丽，你猜回顾一下，组件三要素：
「属性 + 方法 + 事件」
当然了，可别忘咱们的插槽小可爱哟！
❝组件通信还记得吧
❞
那个爱出风头的孙子，还有那个老顽童爷爷
现在轮到咱们的小可爱出场啰，鼓掌欢迎！
<el-header>, 我是传入的一个插槽
this.$slots, 我是放插槽的架子
没有名字，给个默认吧
this.$slots.default
插槽到底是个啥玩意？拆开看看
vnode???,啥玩意啊
vnode.componentOptions有点熟
parent.$options想起来了吗？
哦，原来是这个呀，哈哈哈
提前return
什么，你要插队？那怎么行！！！
该不会是来挖墙脚的吧
代码片段
computed: {
isVertical() {
...
if (this.direction === 'vertical') {
return true;
} else if (this.direction === 'horizontal') {
return false;
}
return this.$slots && this.$slots.default
...
}
技巧解析
❝❞
this.direction组件要素，属性
有传值，直接带走，不给别人留机会
不传值，手下留情，肥水不流外人田
2 Header
对象简化
老公，我饿了？
吃什么？
不知道
烧烤怎么样？
走！
老公,我饿了？
吃烧烤
走！
老公，
走！
「就是这么简单，就是这么直接，有木有」
代码片段
<header class="el-header" :style="{ height }">
<slot></slot>
</header>
技巧解析
❝style="height: 60px"
❞
:style="{height: height}"
:style="{height}"
有默契就是这么拽，有木有
3 Aside
代码片段
<aside class="el-aside" :style="{ width }">
<slot></slot>
</aside>
技巧解析
❝我有什么好说的呢
❞
上面的，看我不打死你
4 Main
代码片段
<main class="el-main">
<slot></slot>
</main>
技巧解析
❝好可怕，好血腥
❞
我想静静
5 Footer
代码片段
<footer class="el-footer" :style="{ height }">
<slot></slot>
</footer>
技巧解析
❝大晚上的吵什么吵
❞
好好的兴致都搞没了
「这是人性的扭曲？」
「还是道德的沦丧！」
❝我是一只七秒记忆的鱼
带你来一场奇妙的旅行
❞
