Vue组件开发“干~倒”尤雨溪

作为一个有梦想的前端。我们的目标是：
向尤雨溪学习，“干~倒”尤雨溪。

“尤雨溪”将会出一系列的内容。对于vue相关的思想会较为深度的体验。

又又又发现了一种开发组件的方式，虽然很多人已经这样开发了。但是作为菜鸡的发现者，依然觉得很香，之前说过通过遍历solt。然后劫持监听事件。然后通过ref进行组件的控制。这种方式，代码复杂，灵活性不高。

今天使用bus来封装组件。对你没听错，就是耳熟能详的bus（对于不知道bus的可以自己百度）。

其实使用bus是对于很多需求，很多联动组件。就需要使用bus来控制。本次就拿比较常见的。开始日期与结束日期来举例。

“干倒”尤雨溪 – 懋官的个人博客 (hengweishiye.top)

用法

    <StartDate v-model="startDate1" /><EndDate v-model="endDate1" />

是不是用起来极其的简单？是不是觉得还能这样？

没错的，这只是其中一种的用法，为你打开组件开发的大门。

StartDate组件

<template><a-date-picker :placeholder="placeholder" :value="value" @change="change" valueFormat="YYYY-MM-DD" :disabled-date="disabledStartDate":disabled="disabled" :allowClear="allowClear"/>
</template><script lang="ts">
import {defineComponent, onUnmounted, ref, unref, watch} from "@vue/composition-api";
import moment from "moment";
import {$bus, START_VALUE, END_VALUE} from "./hooks/bus";export default defineComponent({name: "StartDate",model: {prop: 'value',event: 'change'},props: {placeholder: String,value: {type: String,required: true},/*** 开始日期的监听symbol 同组件中使用多个 开始日期组件。需要用传入不同的symbol*/startSymbol: {type: Symbol,default: START_VALUE},/*** 结束日期的监听symbol 同组件中使用多个 结束日期组件。需要用传入不同的symbol*/endSymbol: {type: Symbol,default: END_VALUE},disabled: {type: Boolean,default: false},allowClear: {type: Boolean,default: false},/*** 是否可以等于*/eq: {type: Boolean,default: false}},setup(props, {emit}) {const endValue = ref('')const change = (value: string) => {emit('change', value)}watch(() => props.value, (value: string) => {setTimeout(() => $bus.$emit(props.startSymbol, value))}, {immediate: true})$bus.$on(props.endSymbol, (value: string) => {endValue.value = value;})const disabledStartDate = (startValue: string) => {if (!startValue || !unref(endValue)) {return false;}if(props.eq) {return moment(startValue).valueOf() > moment(unref(endValue)).valueOf();}return moment(startValue).endOf('day').valueOf() >= moment(unref(endValue)).endOf('day').valueOf();}onUnmounted(() => {$bus.$off(props.startSymbol)$bus.$off(props.endSymbol)})return {change,disabledStartDate,endValue}}
})
</script>

EndDate组件

<template><a-date-picker :placeholder="placeholder" :value="value" @change="change" valueFormat="YYYY-MM-DD" :disabled-date="disabledEndDate":disabled="disabled" :allowClear="allowClear"/>
</template><script lang="ts">
import {defineComponent, onUnmounted, ref, unref, watch} from "@vue/composition-api";
import moment from "moment";
import {$bus, START_VALUE, END_VALUE} from "./hooks/bus";export default defineComponent({name: "StartDate",model: {prop: 'value',event: 'change'},props: {placeholder: String,value: {type: String,required: true},startSymbol: {type: Symbol,default: START_VALUE},endSymbol: {type: Symbol,default: END_VALUE},disabled: {type: Boolean,default: false},allowClear: {type: Boolean,default: false},/*** 是否可以等于*/eq: {type: Boolean,default: false}},setup(props, {emit}) {const startValue = ref('');const change = (value: string) => {emit('change', value)}watch(() => props.value, (value: string) => {setTimeout(() => $bus.$emit(props.endSymbol, value))}, {immediate: true})$bus.$on(props.startSymbol, (value: string) => {startValue.value = value;})onUnmounted(() => {$bus.$off(props.startSymbol)$bus.$off(props.endSymbol)})const disabledEndDate = (endValue: string) => {if (!endValue || !unref(startValue)) {return false;}if(props.eq) {return moment(unref(startValue)).endOf('day').valueOf() > moment(endValue).endOf('day').valueOf();}return moment(unref(startValue)).endOf('day').valueOf() >= moment(endValue).endOf('day').valueOf();}return {change,disabledEndDate,startValue}}
})
</script>

bus

// @ts-nocheck 为保持和vue2版本中使用bus一致，emit,on,off前面都加了$
export type EventType = string | symbol;
export type Handler<T = any> = (event: T) => void;
export type EventMap = { [key: EventType]: Array<Handler> };
class Bus {private readonly list: EventMap;constructor() {// 收集订阅信息,调度中心this.list = {} as EventMap;}// 订阅$on(name: EventType, fn: Handler) {this.list[name] = this.list[name] || [];this.list[name].push(fn);}// 发布$emit(name: EventType, data?: any) {if (this.list[name]) {this.list[name].forEach((fn: Handler) => {fn(data);});}}// 取消订阅$off(name: EventType) {if (this.list[name]) {delete this.list[name];}}
}
export default Bus;