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

Logo

前往低代码交流专区

更多推荐