❝你既然已经做出了选择
又何必去问为什么选择
❞
前言
如果，有人告诉你，你可以认识世界上的任何一个人
你会怎么想？
可世上偏偏会有各色各样的「疯子」
研究各种稀奇古怪的理论
这不，六度分隔理论，可以让你在不超过5个人的连接下，认识世界上的任何一个人，很神奇吧！
其实，互联网更神奇，通过链接
Link,你可以跳转到任何网页
有需要的童鞋，请自备梯子
上车了吗？嗖嗖嗖，坐着光线旅行去！
1 Link
动态短路类名
昨天才告诉我，要赶紧跑？怎么今天突然就短路了呢？
我到底是跑还是不跑？
代码片段
<a
:class="[
'el-link',
type ? `el-link--${type}` : '',
disabled && 'is-disabled',
underline && !disabled && 'is-underline'
]"
...
>
技巧解析
❝还记得吗？动态类名的三种写法
❞
add，remove，toggle
常规增减，'is-disabled': disabled
短路增减，disabled && 'is-disabled'，你get到了吗？
属性集体绑定
- 大哥，他家里好像没什么值钱的东西？
- 嘘，小点声，你看，有块手表，带钻的
- 大哥，快看，还有戒指，红酒，82年的
- 小明，快过来，这有口箱子
- 大哥，好沉啊，里面一定有好东西
- 来，咱两搬回去
- 累死了，究竟是什么宝贝？
- 这是哪？我在哪里？
- 卧槽，怎么是个大男人
代码片段
<a
...
:href="disabled ? null : href"
v-bind="$attrs"
...
>
<el-link
href="https://element.eleme.io"
target="_blank"
disabled>默认链接</el-link>
技巧解析
❝:href,单个属性绑定，每次只能取一个
❞
v-bind,集体绑定，连箱子一起带走
还记得吗？组件要素，props
很明显target不在props里面，那还怎么通信, 所以$attrs收集了不在props里面的属性
又是一种新的组件通信方式
❝回顾一下组件通信
❞
属性事件：props-emit
爷爷孙子：$parents-$children
小偷箱子：v-bind-$attrs
你学会了吗？
具名插槽
- 你叫什么名字？
- 叫我小花吧
- 你全名叫什么？
- 我名字不好听，还是叫我小花吧
- 名字是父母起的，好不好听，不是你的责任,你叫啥？
- 牛爱花
- 那你还是叫小花吧
代码片段
<el-link>
我没有名字
</el-link>
<span v-if="$slots.default" class="el-link--inner">
<slot></slot>
</span>
<el-link>
我没有名字
<div name="icon">
我的名字叫icon
是这条街最靓的仔
<i class="el-icon-view el-icon--right"></i>
<div>
</el-link>
<template v-if="$slots.icon">
<slot v-if="$slots.icon" name="icon"></slot>
</template>
技巧解析
❝❞
$slots.default, 我没有名字，所以大家叫我default
$slots.icon, 我有名字，icon，怎么样，是不是这条街, 最靓的仔
「如果我手上没有剑」
「我就无法保护你」
❝我是一只七秒记忆的鱼
带你来一场奇妙的旅行
❞
