❝我一直都想证明
努力是能够超越天才的
❞
前言
- 我想要杯拿铁
- 您要的是这个吗?
- 额,这个中杯
- 对不起先生,这个是大杯,这个才是中杯
- 你这不是大、中、小三个杯子吗?我要这个中杯
- 对不起先生,那个是大杯,这才是中杯...,中杯,大杯,特大杯
- 我不管你们怎么叫,我就要这三个杯子里的中杯
- 对不起先生,这个是大杯,这才是中杯
那么,问题来了,到底是什么杯呢?
拿好你的那一杯,小心别洒出来了,出发!
1 Radio
事件修饰
把一粒石子扔进水里会怎么样?
石子往下沉咯
还有呢?
水面会有泡泡浮出来呗
不错嘛,事件也是类似的,捕获
和冒泡
代码片段
<label
...
@keydown.space.stop.prevent="..."
>
...
</label>
技巧解析
❝❞
prevent
——阻止冒泡,水面上没有泡泡
stop
——阻止默认事件,水面上不产生波纹
space
——按下空格键触发,只有仍在湖中心才可以哦
想要了解更多,造起来吧 事件修饰符
双向绑定
- 我们吵一下架怎么样?
- 不好吧
- 假装吵一下,没关系的
- 你保证不会生气
- 我保证
- 你还坐着干什么,还不赶紧去做饭!!
- 呜呜呜,你凶我,你竟然凶我
- 不是,那个...
- 我不听,我不听
- 是你说假装吵一下的呀
- 我不管,我不管
- 要不咱们出去吃饭
- 呜呜呜。。。
- 给你买瓶香水?
- 这可是你说的哦,可不许反悔,我做饭去了 「为什么受伤的总是我!」
代码片段
...
<input
...
:value="label"
type="radio"
v-model="model"
...
>
...
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
技巧解析
❝凭什么只许你撒娇,不许我发脾气
❞
可以的,因为咱们是双向的
撒娇
赋值,radio, 你现在是'1'
发脾气
点击,戳你一下,你现在是'2' 记住,双向的才会更融洽
mixins混合
- 阿悦,能不能加个微信
- 阿悦,二维码扫一下
- 阿悦,加个微信呗
- 阿悦,...
- 阿悦,...
... - 你们烦不烦啊,我二维码发群空间了 总算加到美女微信了
代码片段
export default {
...
mixins: [Emitter]
...
}
// emitter.js
export default {
methods: {
dispatch(componentName, eventName, params) {
...
},
broadcast(componentName, eventName, params) {
...
}
}
};
技巧解析
❝很烦吧,每次都有人来找
❞
那么,找个地方存起来呗,如果需要,自己去取
既然你们都需要使用dispatch
和broadcast
,那么我就把他们存起来,放在emitter.js
里面去了,如果需要,自行引入,然后混入Emitter
依赖注入
- 喂,把这个纸条传给她
- 把这个传给她,后面那位兄弟的
- 把这个传给她,那位兄弟给的
- 给你,他给的
代码片段
export default {
name: 'ElForm',
componentName: 'ElForm',
provide() {
return {
elForm: this
};
}
...
}
export default {
...
name: 'ElRadio',
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
}
...
}
技巧解析
❝甜是很甜啦,不过很麻烦,不是吗
❞
来,兄弟,送你一个好东西
什么?
wechat,下次你直接把纸条传给她
provide
: 我把elForm
传给你了
inject
: 我收到了,怎么还有惊喜呢 惊不惊喜,意不意外,O(∩_∩)O
❝发现了吗,一种新的通信方式
❞
回顾一下组件通信
属性事件:props-emit
爷爷孙子:$parents-$children
小偷箱子:v-bind-$attrs
纸条妹子:provide-inject
你学会了吗?
props类型
- 滴
- 滴,学生卡
- 滴,工作卡
- 滴,老年卡
- 你为什么不刷卡?
- 我有这个
- 卧槽,居然是骑士卡
代码片段
export default {
props: {
value: {},
label: {},
disabled: Boolean,
name: String,
border: Boolean,
size: String
}
}
技巧解析
❝还记得吗?
❞
每个props都可以有自己独特的类型
name: String, 字符串类型
size: [String, Number], 字符串或数字
value: {},全能型
是不是很拽!!
「休息一会儿,马上回来」
「起风了,唯有努力生存」
跟随Element学习Vue小技巧(9)——Radio(下)