别名cus之vue 设计模式之观察者模式（自定义事件）

vue 中 观察者模式，用于子组件向父组件传递参数，即子组件 emit自定义一个事件名称，及其参数，父组件用事件接受即可，事件第一个参数为自定义事件名称，第二个参数为回调函数
子组件代码为

<template>
    <div>
        <input type="text" v-model="inputVal" @change="sendParams">
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            inputVal: ''
        }
    },
    methods: {
        sendParams () {
            this.$emit('handlerVal',this.inputVal)
        }        
    }
}
</script>

父组件代码

<template>
    <div>
        <Child @handlerVal="getData"/>
    </div>
</template>
import Child from 'components/Child'
<script>
    export default {
        data () {
            return {
                inputVal: ''
            }
        },
        methods: {
            getData (data) {
               console.log(data)
            }
        }
    }
</script>

很简单，不用多说，重点来了，vue是怎么通过自定义事件做这样的呢？
其实很简单，只需要在Vue上挂载一个对象，然后这个对象的 key(键) 为 自定义事件名称， value （值）为 自定义事件传递的参数。当有了这个思路之后，下面就是具体的落实了，代码如下

<script type="text/javascript">
var Event = {
    on: function(eventName,arg) {
        this.handles = this.handles || {};
        this.handles[eventName] = arg || null ;
    },
    emit: function (eventName, cb) {
        if(this.handles[eventName]) {
            cb(this.handles[eventName])
        }
    }
}
 
Event.on('lcq','haha')
Event.emit('lcq',getData)
function getData(data) {
    console.log(data) // haha
}
</script>

其实就是读写 Event.handles 这个对象的key和value
原文链接https://blog.csdn.net/luchuanqi67/article/details/80987038?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase