别名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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值