❝我一直都想证明
努力是能够超越天才的
❞
前言
- 我想要杯拿铁
- 您要的是这个吗？
- 额，这个中杯
- 对不起先生，这个是大杯，这个才是中杯
- 你这不是大、中、小三个杯子吗?我要这个中杯
- 对不起先生，那个是大杯，这才是中杯...，中杯，大杯，特大杯
- 我不管你们怎么叫，我就要这三个杯子里的中杯
- 对不起先生，这个是大杯，这才是中杯
那么，问题来了，到底是什么杯呢？
拿好你的那一杯，小心别洒出来了，出发！
2 RadioButton
计算属性
叮铃铃，早上8:00， 起床上班啦 *_*
叮铃铃，早上8:10， 起床上班啦 *_*
叮铃铃，早上8:30， 起床上班啦 *_*
叮铃铃，中午12:00，准备吃饭啦 -_-
叮铃铃，中午18:00，赶紧下班啦 ^_^
代码片段
computed: {
value: {
get() {
return this._radioGroup.value;
},
set(value) {
this._radioGroup.$emit('input', value);
}
}
...
}
computed: {
value: {
return this._radioGroup.value;
}
...
}
技巧解析
❝好烦啊，这个闹钟！！
❞
不过，它可以时刻提醒你
get—— 叮铃铃，快，外卖要到点了，赶紧把返回值给我
set，叮铃铃，咯，值给你，你想怎么处理咧
❝当然啦，要太烦的话，只设一个闹钟就好，不过它只能叫你起床啦
❞
记得按时起床，可别迟到了哦
事件派发
还记得纸条妹子吗？
收到纸条不回，不太好吧 o(╥﹏╥)o
可又不想让别人知道，怪难为情的
老天，请赐我一件神器！！
代码片段
{
name: 'ElRadioButton'
methods: {
handleChange() {
this.$nextTick(() => {
this.dispatch(
'ElRadioGroup',
'handleChange',
this.value
)
});
}
}
}
技巧解析
❝❞
dispatch，我这里发生了handleChange事件，请火速将this.value这条信息传递送给ElRadioGroup
好的，长官，我马上去
❝发现了没，又一种新的通信方式
❞
回顾一下组件通信
属性事件：props-emit
爷爷孙子：$parents-$children
小偷箱子：v-bind-$attrs
纸条妹子：provide-inject
消嘤神器：dispatch-broadcast
你学会了吗？
3 RadioGroup
对象冻结
- 孩子他爸，你看你闺女涂的满脸都是
- 孩子他妈，你下次把化妆品放高一点
- 彤彤，你怎么又给妈妈添乱了呀
- 你看，这孩子又涂得满脸都是
- 看样子咱得加把锁，不让她乱动
代码片段
const keyCode = Object.freeze({
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
});
技巧解析
❝你自己写的对象被被人更改过吗？
❞
心里跑过多少只草做的马
不怨天，不由人
下次冻结就好，Object.freeze()
事件绑定
- 要吃糖吗？
- 什么糖？
- 语法糖
- 甜吗？
- 甜
- 不好意思，我牙不好，吃不了你给的糖
代码片段
created() {
this.$on('handleChange', value => {
this.$emit('change', value);
});
}
<div @handleChange="handleChange"></div>
技巧解析
❝语法糖，你要吃吗？哈哈哈
❞
组件要素，事件，我想你一定还记得
$emit, 发送, 发送给谁呢？肯定得先预定，才能发送，对吧
$on, 预定，普通预定
那肯定有高级预定咯
@handleChange, 高级预定
你肯定想要搞搞特殊吧「注意」，别吃坏牙了哦
4 emitter
this指向
- 你是在井边出生的，所以就叫你井上吧
- 你是在小树林出生的，所以就叫你小林吧
- 你是在高地上的桥边出生的，所以就叫你高桥吧
- 你是在田地里出生的，所以就叫你田中吧
- 妈，我爸呢？他是谁？他在那里？
代码片段
methods: {
dispatch(componentName, eventName, params) {
...
if (parent) {
parent.$emit.apply(
parent,
[eventName].concat(params)
)
}
},
broadcast(componentName, eventName, params) {
broadcast.call(
this,
componentName,
eventName,
params
)
}
}
技巧解析
❝所以，
❞this到底指向谁呢
没人要，你就指向window，国家养你 谁最关心你，你就找谁，a.b.c.fn,c离我最近，我应该指向他吧
既然没人要，我自己找个爸爸
fn.call(Daddy, 'money'), 富爸爸
fn.apply(D,['knowledge']),穷爸爸
「只要有想见的人」
「就不再是孤身一人了」
❝我是一只七秒记忆的鱼
带你来一场奇妙的旅行
❞
