记录个人eventBus的第一次使用(vue)

在用vue写项目的时候 有这样的一个问题。

很多地方都要用到遮罩层, 就是查看信息的时候那个背景er。(遮罩层是很容易实现的, 但是这里讲的类似于遮罩层这种常用的东西)

由于遮罩层用的比较多(可以看成一个复用性很强的组件), 我决定把这个遮罩层提出来作为一个单独的组件。又由于一些特定的场景,我决定实现一个大组件里只有一个遮罩层。就相当于是 1对多 的关系, 不限兄弟 父子组件。由于不涉及到很多数据, 也就不会打算用 vuex . 也是我想要打算用 eventBus 的前提.

前提工作说完, 那么开始个人的实现和使用:

1. 先建个文件 eventBus.js . (这个文件我放在common/js里):

// 这里是eventBus.js的内容

import Vue from 'vue';

export const bus = new Vue();

2. 比如我在点击查看商品详情的时候  后面显示遮罩层。 还有实现点击遮罩层或者点击关闭按钮来恢复正常, 这时候我们就得需要两个组件之间的通信(不限组件里的关系多远)。 (移动端)

这是我遮罩层 Mask 里的部分代码: 

<template>
    <div class="mask" v-if="isShow" @click="closeMask()">

    </div>
</template>

<script>
    import {bus} from '../../common/js/eventBus';

    export default {
        data: function () {
            return {
                isShow: false,
                targetObj: {},
                showTarget: ''
            }
        },
        methods: {
            openMask (that, showTarget) {    // 这里是bus.$emit传的参数, bus.$on接受指定信号和参数. 这里的that是触发信号的对象, showTarget是名字字符串。
                this.targetObj = that;
                this.isShow = !this.isShow;
                this.showTarget = showTarget;
            },
            closeMask () {
                this.isShow = !this.isShow;
                
                this.targetObj[this.showTarget] = !this.targetObj[this.showTarget];
               
            }
        }
        mounted () {
            bus.$on('toggleMask', this.openMask);   // toggleMask信号被触发就会调用openMask这个方法
        }
    }
    
</script>

 

css就不放进去了。 主要是讲eventBus.

商品详情组件的部分代码: 

<template>
    <div>
        ...
        <div class="shop-detail" @click="show()" v-if="isShow"></div> 
    </div>
    <MyMask></MyMask>
</template>

<script>
    import {bus} from 'xxxx/eventBus.js';  // 路径
    import MyMask from '../xxx/MyMask.vue';
    export default {
        components: {MyMask},
        data: function () {
            return {
                isShow: false
            }
        },
        methods: {
            show () {
                this.isShow = !this.isShow;
                bus.$emit('toggleMask', this, 'isShow');   // 这里触发bus的消息, 并传递参数.
            }
        }
    }
</script>

这样就用eventBus实现了两组件的通信. 参数也可以传入函数。

记录完毕。