跟随Element学习Vue小技巧(9)——Radio(上)

896 阅读4分钟

我一直都想证明

努力是能够超越天才的

前言

  • 我想要杯拿铁
  • 您要的是这个吗?
  • 额,这个中杯
  • 对不起先生,这个是大杯,这个才是中杯
  • 你这不是大、中、小三个杯子吗?我要这个中杯
  • 对不起先生,那个是大杯,这才是中杯...,中杯,大杯,特大杯
  • 我不管你们怎么叫,我就要这三个杯子里的中杯
  • 对不起先生,这个是大杯,这才是中杯

那么,问题来了,到底是什么杯呢?

拿好你的那一杯,小心别洒出来了,出发!

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) {
      ...
    }
  }
};

技巧解析

很烦吧,每次都有人来找
那么,找个地方存起来呗,如果需要,自己去取
既然你们都需要使用dispatchbroadcast,那么我就把他们存起来,放在emitter.js里面去了,如果需要,自行引入,然后混入Emitter

依赖注入

  • 喂,把这个纸条传给她
  • 把这个传给她,后面那位兄弟的
  • 把这个传给她,那位兄弟给的
  • 给你,他给的

代码片段

export default {
  name'ElForm',
  componentName'ElForm',
  provide() {
    return {
      elFormthis
    };
  }
  ...
}
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: {},
    disabledBoolean,
    nameString,
    borderBoolean,
    sizeString
  }
}

技巧解析

还记得吗?
每个props都可以有自己独特的类型
name: String, 字符串类型
size: [String, Number], 字符串或数字
value: {},全能型
是不是很拽!!

休息一会儿,马上回来 起风了,唯有努力生存

跟随Element学习Vue小技巧(9)——Radio(下)

参考链接

往期回顾